CODEWITHSUNDEEP
jqueryhtml
Priyank Patel
Priyank Patel

Reputation: 7006

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

Upvotes: 3

Views: 27598

Answers (4)

iappwebdev
iappwebdev

Reputation: 5910

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

Upvotes: 4

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

You can use any light box plugin. Many of them is available out there, Here is a demo using http://www.jacklmoore.com/colorbox

Working Demo

Add the big image's url in href of a and add a class like colorbox, then include necessary files and initialize colorbox like

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

Upvotes: 0

Wouter Konecny
Wouter Konecny

Reputation: 3550

What you are looking for is called a Lightbox. "Fancybox" it is a jQuery Lightbox plugin.

You can find that plugin over here: http://fancybox.net

There is plenty of good documentation about it too and it is very simple to use: http://fancybox.net/howto

Example:

You just have to include all .js and .css files and modify your HTML a little bit:

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

Then you add the Fancybox:

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

Upvotes: 2

AHMED EL-HAROUNY
AHMED EL-HAROUNY

Reputation: 836

you can use some lightbox plugin like: http://leandrovieira.com/projects/jquery/lightbox/

Upvotes: 1

Related Questions