如何在点击弹出窗口中显示图像(How to show an image in a popup on click)

如何在点击弹出窗口中显示图像(How to show an image in a popup on click)

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

示例小提琴

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.

Example Fiddle

最满意答案

这是一个没有任何插件帮助的小提琴： 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');

Here's a fiddle without any help of a plugin: 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.

<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:

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