jQuery:如何在单击缩略图时显示图像弹出窗口?

In my aspx page I have a thumbnail image <img>. When the user clicks on that image I would like a popup to show that blocks out the rest of the UI with the larger (full) version of the image.

在我的aspx页面中，我有一个缩略图。当用户单击该图像时，我希望弹出窗口显示使用较大(完整)图像的UI的其余部分。

Are there any plugins that can do this?

有什么插件可以做到这一点吗?

5 个解决方案

#1

There are a lot of jQuery plugins available for this

有很多jQuery插件可以使用

Thickbox

Thickbox的

LightBox

LightBox

FancyBox

FancyBox

FaceBox

FaceBox

NyroModal

NyroModal

PiroBox

PiroBox

Thickbox Examples

Thickbox的例子

For a single image

一个图像

1. Create a link element ()
2. 创建一个link元素()
3. Give the link a class attribute with a value of thickbox (class="thickbox")
4. 将一个类属性与thickbox (class="thickbox")的值关联起来。
5. Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)
6. 在href属性中为图像文件提供路径(.jpg .jpeg .png .gif .bmp)

#2

I like prettyPhoto

我喜欢prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox

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

#3

Sorry for posting on such an old thread. I was in a same situation and I found a different solution that worked better for me (I didn't have to code)

很抱歉在这么老的帖子上发帖。我处于同样的情况，我找到了一个更好的解决方案(我不需要编码)

WOWslider

WOWslider

Best of luck

最好的运气

#4

This is the most popular (9500 stars) and light weight (20KB minify, 7.5KB minify+gzip) popup gallery I think: Magnific-Popup

这是最受欢迎的(9500颗星)和轻重量(20KB缩小，7.5KB缩小+gzip)的弹窗画廊

#5

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox

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