图像的Jquery弹出窗口

Question

单个html页面中有三个或更多图像，需要在单击特定图像后在弹出窗口中显示相同的图像。我可以用它做什么吗？

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300">
<img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300">

Answer 1

您可以使用bootstrap模式执行此操作。检查this我的答案。

Answer 2

您可以通过在图片上添加onclick功能在javascript中进行操作

$('.wp-image-4596').click(function(){ $('#popupimage').attr('src', $(this).attr('src')); });

<img class="wp-image-4596 size-medium" src="img1.jpg" alt="img1" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img2.jpg" alt="img2" width="232" height="300"> <img class="wp-image-4596 size-medium" src="img3.jpg" alt="img3" width="232" height="300"> <div id="popup"><!--this is your pop for example--> <img src='' id="popupimage"> </div>

这将获得所点击图像的来源，并将其用作弹出图像的来源

Answer 3

嘿，man使用lightbox2 jQuery插件，这有很酷的效果和功能。

如果您想使用更简单的插件，那么您可以使用magnafic popup插件。