Question

So I’m a beginner at this whole javascript thing, and this is probably a really beginner question. I’ve been searching all over for the answer and even tried modifying source code for some basic accordions, but it never works.

Basically I want to write a function that when you click a thumbnail, the image expands. I’ve got that part down, what I can’t figure out is how to then when you click on another image, the first image goes back to being a thumbnail while the newly clicked image expands. I would like there to be an animation quality to it, but I’ll just be happy with the basic functionality, and maybe I can work out how to animate it myself. My image gallery is in an unordered list, with each image set as a list item, and I’m trying to use jquery to do this.

thanks in advance!!

here’s what I have making have images larger when you click:

$('ul#live li img').click(function() {
    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });
});

my css:

ul#live li img {
width:120px;
height:72px;
}

that’s it.
now all I want is to be able to click on another image and have the first image clicked go back to it’s original 120px width. That’s it. I’m not trying to have it removed from the flow, or in any sort of lightbox. The way I’m doing it is probably not the best way, I’m just learning and experimenting. Hope this clears things up.

Answer 1

it can be done fairly straight forward. What i’ve done in the past with similar is give the expanded element a new class $(this).addClass('active_element');

You can then add an animation so that when the next item is clicked, any with .active_element is affected first – run your animation, remove the class and then run the effect for the newly selected element.

$('ul#live li img').click(function() {
    $('.active_element').animate({

    //close animation goes here

    });
    $('.active_element').removeClass('active_element');

    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });

    $(this).addClass('active_element');

});

This can be written a little neater, but that’s the basic principle spelled out step by step.

it’s down and dirty, but will do the job.