Question

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