如何在点击弹出窗口中显示图像

Question

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

Example Fiddle

Answer 1

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

回答您的评论

假设您的较大图像具有完全不同的名称，我会将该名称放在数据中 - * - 图像标记中的属性，例如

<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

的演示

Working Demo

在href的{​​{1}}中添加大图片的网址，然后添加类似a的类，然后添加必要的文件并初始化颜色框

<强> HTML

colorbox

<强> jQuery的：

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