jQuery 从服务器获取图像并显示为弹出窗口

Question

我在服务器中有图片，我希望将它们显示为弹出窗口。

工作流程如下：

1- 我得到了要显示图像的行的 ID。
2- 我使用 id 进行 Ajax 调用，以便从服务器获取图像名称。
3- 我 return 将图像作为，像这样：

 $options2.= "<a href=\"/js/images/up/".$name."\"\" data-jbox-image=\"gallery1\" title=\"My image\"><img src=\"/js/images/up/".$name."\"\" alt=\"\"></a>";

4- 但是在收到此消息时我必须将其显示为弹出窗口。这就是我被击中的地方。我可以在 div 中显示它。但是如何在弹出窗口中显示它？

5- 我搜索并得到了这样的弹出窗口- 但我得到的图像是动态，所以不知道如何应用它。

new jBox('Image');

   <a href="/image1_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a>

请多多指教

编辑

此外，当前页面中没有图像，只有一个按钮，我想在其中使用 ajax 调用 return 返回图像作为弹出窗口

Answer 1

您可以为此使用 Fancybox。它是一个 jQuery-类似 jBox 的插件，但更易于使用。

代码示例：

$(document).ready(function() {

  $("a.imageLink").fancybox();

});

<a class="imageLink" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

使用此代码打开 ajax 成功函数上的 fancybox：

$.fancybox({
  'href'            : returnVal,
  'title'           : 'Lorem ipsum dolor sit amet',
  'transitionIn'    : 'elastic',
  'transitionOut'   : 'elastic'
});

Answer 2

尝试使用 Jquery-ui http://api.jqueryui.com/dialog/

$("#your-div-id-with-the-img").dialog();

jQuery 从服务器获取图像并显示为弹出窗口

jQuery to get an image from server and display as popup

ajax

jquery

popup

编辑