jQuery 如何在单击时在弹出窗口中显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10910537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show an image in a popup on click
提问by Priyank Patel
I am having a simple accordion which has three divs Category One,Category Two,Category Three.All the three divs have some images , whaT i want to achieve is that when I click on any image from the accordion , that image should be displayed in a popup with its height width increased.Can any one help me out.Any help is much appreciated.Thanks.
我有一个简单的手风琴，它有三个 div，第一类，第二类，第三类。所有三个 div 都有一些图像，我想要实现的是，当我单击手风琴中的任何图像时，该图像应该显示在一个高度宽度增加的弹出窗口。任何人都可以帮助我。非常感谢任何帮助。谢谢。
回答by iappwebdev
Here's a fiddle without any help of a plugin: http://jsfiddle.net/SzR6h/25/
这是一个没有任何插件帮助的小提琴：http: //jsfiddle.net/SzR6h/25/
Answer to your comment
回复你的评论
Assume that your bigger images have a completely different name, I'd put that name in a data-*-Attribute in the image tag, e.g.
假设你的大图片有一个完全不同的名字，我会把这个名字放在图片标签的 data-*-Attribute 中，例如
<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"
data-image-big="url_to_image_big"/>
In your javaScript, you can then get image URL by writing:
在您的 javaScript 中，您可以通过编写以下内容来获取图像 URL：
var urlBigImage = $img.data('image-big');
回答by Wouter Konecny
What you are looking for is called a Lightbox. "Fancybox" it is a jQuery Lightbox plugin.
您正在寻找的东西称为灯箱。“Fancybox”它是一个 jQuery Lightbox 插件。
You can find that plugin over here: http://fancybox.net
您可以在这里找到该插件：http: //fancybox.net
There is plenty of good documentation about it too and it is very simple to use: http://fancybox.net/howto
也有很多关于它的好文档，使用起来非常简单：http: //fancybox.net/howto
Example:
例子：
You just have to include all .js and .css files and modify your HTML a little bit:
你只需要包含所有 .js 和 .css 文件并稍微修改你的 HTML：
<a class="my_images" href="bigimage.jpg">
<img src="thumbnail.jpg" alt=""/>
</a>
Then you add the Fancybox:
然后添加 Fancybox：
$("a.my_images").fancybox();
回答by AHMED EL-HAROUNY
you can use some lightbox plugin like: http://leandrovieira.com/projects/jquery/lightbox/
您可以使用一些灯箱插件，例如：http: //leandrovieira.com/projects/jquery/lightbox/
回答by Prasenjit Kumar Nag
You can use any light box plugin. Many of them is available out there, Here is a demo using http://www.Hymanlmoore.com/colorbox
您可以使用任何灯箱插件。其中许多都可用，这是使用http://www.Hymanlmoore.com/colorbox的演示
Add the big image's url in hrefof aand add a class like colorbox, then include necessary files and initialize colorbox like
在hrefof 中添加大图像的 urla并添加一个类colorbox，然后包含必要的文件并像初始化颜色框一样
HTML
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:
jQuery：
$('a.colorbox').colorbox({photo:true});
