Toggle the width of the image inside the gallery when clicked, the rest are disabled

Question

I have a gallery with thumbnail images. When you click on one thumbnail, its width will be animated and display the full image. When you click on it again, it will be reduced to its original size. I achieved this with the switch function and it works great.

The problem is that when I click on a thumbnail, I would like other thumbnails to be turned off, but I can’t achieve this. Is it possible?

Here is the HTML:

<figure class="grid_4 alpha medium"><img class="medium pl pt" src="images/gallery/1.jpg" /><span class="rollover opa2"></span></figure> <figure class="grid_2 small"><img class="small pr pt" src="images/gallery/4.jpg" /><span class="rollover opa2"></span></figure> <figure class="grid_4 omega medium"><img class="medium pr pt" src="images/gallery/5.jpg" /><span class="rollover opa2"></span></figure> 

And this is jquery:

 $('.gallery figure').toggle(function(){ $(this).find('img').animate({width:620, height:620}, 500, "easeOutExpo"); },function(){ $('.gallery .medium').animate({width:300, height:300}, 500, "easeOutExpo"); $('.gallery .small').animate({width:140, height:140, marginTop:0}, 500, "easeOutExpo"); }); 

I am not so good at jquery, so if anyone can provide any help, I would really appreciate it.

Thanks a lot, Jeff

Answer 1

Instead of suppressing the switch event (which adds ancillary data), I would suggest using a simple flag variable to determine if the image is currently being expanded to full size.

See the following demo: http://jsfiddle.net/adamb/yWSBx/

 var flag = false; $('.foo').click(function() { if($(this).hasClass('focus')) { ////////shrink image } else { if(!flag) { ////////expand image flag = true; } } });​