jQuery：如何在缩略图的单击上显示图像弹出窗口？

Posted 2023-05-09

【中文标题】jQuery：如何在缩略图的单击上显示图像弹出窗口？

【英文标题】：jQuery: How can I show an image popup onclick of the thumbnail?

【发布时间】：2011-01-05 00:18:43

【问题描述】：

在我的 aspx 页面中，我有一个缩略图 <img>。当用户单击该图像时，我希望弹出一个窗口来显示该图像的较大（完整）版本阻挡了 UI 的其余部分。

有没有插件可以做到这一点？

【问题讨论】：

你的意思是这样的？ leandrovieira.com/projects/jquery/lightbox

【参考方案1】：

有很多可用的 jQuery 插件

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

Thickbox 示例

单张图片

创建链接元素() 为链接提供一个值为thickbox的类属性 (class="thickbox") 在 href 属性中提供指向图像文件 (.jpg .jpeg) 的路径 .png .gif .bmp)

【讨论】：

我想要我的照片在ThickBox 我想要图像代码链接-img 看起来如何

查看Thickbox 站点中的示例部分。

不妨为你们中的一些人节省几分钟。厚箱似乎真的有问题。当我在 Chrome 中检查演示页面上的元素时，它停止工作，即使我完全使用演示，它在我自己的页面上也不起作用。

嗨，是否有任何 wp 插件可以在点击时显示所有内容区域图像的弹出窗口。我使用了简单的弹出窗口，它工作正常，但如果您有任何其他的弹出窗口，请在页面底部显示，请分享链接。谢谢

【参考方案2】：

我喜欢prettyPhoto

prettyPhoto 是一个 jQuery lightbox 克隆。它不仅支持图像，还支持视频、flash、YouTube、iframe 和 ajax。这是一个成熟的媒体灯箱

【参考方案3】：

这是我认为最受欢迎（9500 颗星）和轻量级（20KB 缩小，7.5KB 缩小+gzip）的弹出式画廊： Magnific-Popup

【参考方案4】：

我也遇到过这种情况，发现了这个，

WOWslider

【参考方案5】：

prettyPhoto 是一个 jQuery 灯箱克隆。它不仅支持图像，还支持视频、flash、YouTube、iframe 和 ajax。这是一个成熟的媒体灯箱