jQuery:如何在缩略图的单击上显示图像弹出窗口? [英] jQuery: How can I show an image popup onclick of the thumbnail?

查看:8
本文介绍了jQuery:如何在缩略图的单击上显示图像弹出窗口?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

解决方案

有很多 jQuery 插件可用于此

Thickbox

灯箱

FancyBox

FaceBox

NyroModal

PiroBox

Thickbox 示例

单张图片

<块引用>

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

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.

Are there any plugins that can do this?

解决方案

There are a lot of jQuery plugins available for this

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

Thickbox Examples

For a single image

  1. Create a link element ()
  2. Give the link a class attribute with a value of thickbox (class="thickbox")
  3. Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)

这篇关于jQuery:如何在缩略图的单击上显示图像弹出窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆