Question

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

Answer 1

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');