jquery animating different img widths

Question

Hi there,

I've been searching for an answer for a long time with no avail, so it's time to ask. I'm trying to use .animate() to change the size of an image once clicked. The first state of the image would be a thumbnail size, which would animate to the image's original size, then to a thumbnail again.

edit: images load with 150px width by default.

The problem is, not all the images have the same "original" size so I need a way to tell one generic function to switch to the current image's original size.

This is my current code which loads on $(window).load:

$('img[class=resize]').click(function (){
        if ($(this).width() != 150)
        {
            $(this).animate({width: '150px'}, 400);
        }
        else
        {
            $(this).animate({width: ''}, 400);
        }
    });

Now this obviously doesn't work the way I want it, because .animate() thinks when I say width: '' I want to make the width = 0. Any suggestions how I should go about this?

Answer 1

Some basics in jQuery.

$('img[class=resize]') that kind of selector I call "bad karma". You should go with

$('img.resize')

to select images holding the class resize.

To your question, you should store the original image dimensions once. Maybe in an approach like this one:

$('img.resize').one('click', function(){
    var $this = $(this);

    if($.data($this, 'dimension') === null)
       $.data($this, 'dimension', {width: $this.width(), height: $this.height()});              

    $this.toggle(function(){
       $this.animate({width: '150px'}, 400);
    }, function(){
       $this.animate({width: $.data($this, 'dimension').width}, 400);
    }).click;
});

This is untested code, so you have to adapt some typos or logic maybe.