Как сделать поповер, который показывает увеличенную версию динамического c изображения, используя JQuery? - PullRequest
Новая
       1

Как сделать поповер, который показывает увеличенную версию динамического c изображения, используя JQuery?

4 голосов
/ 07 марта 2020

Мне нужно отобразить всплывающее окно, содержащее увеличенную версию динамического c изображения, которое добавляется через файл #insert-image, но я не уверен, как go сделать это, поскольку изображение является динамическим c и URL-адрес изображения меняется в зависимости от того, что выбрано с помощью файла ввода. Приведенный ниже код в основном просто добавляет изображение, выбранное в ячейку таблицы. 

var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image'>");

Ответы [ 2 ]

2 голосов
/ 08 марта 2020

Мне удалось заставить его работать самостоятельно, добавив несколько атрибутов data-toggle='popover'" + "data-img=" + imagePrep + ">" с imagePrep моей переменной. Я также должен был добавить функцию mouseover к своему изображению, и в этой функции я добавил поповер, используя функцию popover (ps. Если вы получаете сообщение о том, что функция всплывающего окна не существует, просто убедитесь, что bootstrap сценариев в вашем файле html, вы можете найти сценарии bootstrap на веб-сайте bootstrap.

Это решение, которое решило мою проблему: 

$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover'" + "data-img=" + imagePrep + ">").on('mouseover', function() {
      $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        html: true,
        content: function() {
          return '<img class="img-fluid" src="' + $(this).data('img') + '" />';
        },
        title: 'Enlarged Image'
      });
    });

Надеюсь, это поможет.

1 голос
/ 08 марта 2020

Просто скопируйте прокомментированный URL и вредителя в текстовое поле Dynami c изображение создано. Вы также используете атрибуты jQuery и Javascript. Ниже приведен пример: 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head><!--from   ww  w  . ja  v  a2  s.c o  m-->
<body>
	<div>
	<input type="text" id="insert-image" />
	<input type="button" id="insert" value = "insert" /> 
	</div>

  <div id="imgwrapper"></div>

  <script>
$(document).ready(function()
{
$("#insert").on("click",function(){
	
    img = document.createElement("img"); 
    
   // img.src = "http://www.java2s.com/style/download.png"; 
    img.src = $('#insert-image').val();
    img.mouseover = function(e){alert(e);}		
    $('#imgwrapper').append(img); 
      $("#imgwrapper").on("mouseover",function(){
	alert("TEST");
	});	
    });
});
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...