用于图像的 Jquery 弹出窗口答案

【问题标题】：Jquery popup for images用于图像的 Jquery 弹出窗口
【发布时间】：2017-06-08 22:08:37
【问题描述】：

单个 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">

【问题讨论】：

标签： jquery html popup requirejs lightbox

【解决方案1】：

您可以在 javascript 中通过在图像上添加 onclick 函数来实现

$('.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"> <img src='' id="popupimage"> </div>

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

【讨论】：

这会在单独的 div 中显示图像，但不会弹出模态窗口并将图像显示在里面。如果您的要求是在另一个单独的 div 中显示图像，那么这个答案很适合！
@PrashanthBR 是的。仅供参考，通过添加正确的 css 和属性，一个 div 可以成为模式。这就是为什么我在代码中添加“”

【解决方案2】：

您可以使用引导模式来做到这一点。检查this 我的答案。

【讨论】：

【解决方案3】：

嘿，伙计，使用 lightbox2 jQuery 插件，它有很酷的效果和功能。

如果你喜欢使用更简单的插件，那么你可以使用 magnafic popup 插件。

【讨论】：