Question

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

工作流程如下：

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

 $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调用将图像作为弹出窗口返回

Answer 1

您可以使用Fancybox。它是一个像jBox一样的jQuery-Plugin，但更容易使用。

代码示例：

$(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从服务器获取图像并显示为弹出窗口

修改

2 个答案: