jquery - 如何在单击时在弹出窗口中显示图像

Question

我有一个简单的手风琴，它有三个 div 第一类，第二类，第三类。所有三个 div 都有一些图像，我想要实现的是，当我点击手风琴中的任何图像时，该图像应该显示在一个高度宽度增加的弹出窗口。任何人都可以帮助我。非常感谢任何帮助。谢谢。

示例小提琴

Answer 1

这是一个没有任何插件帮助的小提琴：http: //jsfiddle.net/SzR6h/25/

回答您的评论

假设您的较大图像具有完全不同的名称，我会将该名称放在图像标签中的 data-*-Attribute 中，例如

<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"
data-image-big="url_to_image_big"/>

在您的 JavaScript 中，您可以通过以下方式获取图像 URL：

var urlBigImage = $img.data('image-big');

Answer 2

您正在寻找的东西称为灯箱。“Fancybox”是一个 jQuery Lightbox 插件。

你可以在这里找到那个插件：http: //fancybox.net

也有很多关于它的好文档，而且使用起来非常简单：http: //fancybox.net/howto

---

例子：

您只需包含所有 .js 和 .css 文件并稍微修改您的 HTML：

<a class="my_images" href="bigimage.jpg">
    <img src="thumbnail.jpg" alt=""/>
</a>

然后添加 Fancybox：

$("a.my_images").fancybox();

Answer 3

您可以使用一些灯箱插件，例如： http: //leandrovieira.com/projects/jquery/lightbox/

Answer 4

您可以使用任何灯箱插件。他们中的许多都在那里可用，这是一个使用http://www.jacklmoore.com/colorbox的演示

工作演示

href在of 中添加大图像的 urla并添加一个类colorbox，然后包含必要的文件并初始化颜色框，如

HTML

<a class="colorbox" href="http://placekitten.com/200/300">
   <img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"/>
</a>

jQuery：

$('a.colorbox').colorbox({photo:true});