How to switch images with jquery ?

Question

Hi

I have a simple setup with one big image container and 3 smaller thumbnail containers.

Now when I click on the thumbnail I want to switch the big image and the small thumbnail image, so that the big image container has now the bigger sized thumbnail and the thumbnail container shows the thumbnail view of the before big image.

    <div class="thumbnailFloat">
    <img src="data/img_2.jpg" width="60" >
    <img src="data/img_3.jpg" width="60" >
    <img src="data/img_4.jpg" width="60" >
</div>

<div class="imageFloat">
    <img src="data/img_1.jpg" width="180" height="250">
</div>

Thanks for helping out.

Answer 1

Try this untested example:

I suggest that you use an ID for the big image.

<div class="thumbnailFloat">
    <img src="data/img_2.jpg" width="60" >
    <img src="data/img_3.jpg" width="60" >
    <img src="data/img_4.jpg" width="60" >
</div>

<div class="imageFloat">
    <img id="bigImage" src="data/img_1.jpg" width="180" height="250">
</div>

---

$( function() {
   $( '.thumbnailFloat img' ).click( function() {
       var oldSource = $( '#bigImage' ).attr( 'src' );
       var newSource = $( this ).attr( 'src' );
       $( this ).attr( 'src', oldSource );
       $( '#bigImage' ).attr( 'src', newSource );
   });
});

Answer 2

$(function() {
    $("div.thumbnailFloat img").click(function() {

       var thumbElement = $(this);
       var imageElement = $("div.imageFloat img");

       // Capture the src of the thumbnail we clicked.
       var thumbSrc = thumbElement.attr('src');
       var imageSrc = imageElement.attr('src');

       // and now swap  the image src attributes 
       imageElement.attr('src', thumbSrc);
       thumbElement.attr('src', imageSrc);

    }
});

If you're doing this in production, you probably also want optimised thumbnail and full-size versions of your images in separate folders, in which case you'll need to modify the SRC attributes something like:

var thumbSrc = thumbElement.attr('src').replace('/thumbs/', '/images/');