CODEWITHSUNDEEP
jquery
Stuart
Stuart

Reputation: 1168

Basic jQuery image gallery with thumbnails

I have a basic image gallery with four thumbnails and four large images one of which is shown, I would like to be able to click on each thumbnail and replace the active large image with the corresponding large image to what was clicked, before I was able to change a single part of the source as below, but this option will no longer work as I can no longer depend on the src of the image:

jQuery('#thumbs').delegate('img','click', function() {
    jQuery('#panel img').attr('src', jQuery(this).attr('src').replace('99_99','600_399'));
});

I have dynamically added each of the four images and thumbnails into two arrays:

var large_photos = jQuery('#panel').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

var thumbnails = jQuery('#thumbs').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

How can I amend the script so that I can click on a thumbnail and the larger image is displayed?

HTML:

<div id="panel">
    <img src="/cache/data/691294/IMGP1617_600_399_s_c1.JPG" alt="" width="600" height="399" />
    <img src="/cache/data/691294/IMGP1618_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
    <img src="/cache/data/691294/IMGP1619_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
    <img src="/cache/data/691294/IMGP1620_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" />
</div>

<div id="thumbs">
    <img src="/cache/data/691294/IMGP1617_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1618_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1619_99_99_c1.JPG" alt="" width="99" height="99" />
    <img src="/cache/data/691294/IMGP1620_99_99_c1.JPG" alt="" width="99" height="99" />
</div>

Upvotes: 0

Views: 1142

Answers (1)

mrtsherman
mrtsherman

Reputation: 39872

This uses the index of the clicked thumb to add a class to the corresponding index of the large image.

$('#thumbs img').click( function() {
    var thumbindex = $(this).index();
    $('.active').removeClass('active');
    $('#panel img').eq(thumbindex).addClass('active');
});

Upvotes: 1

Related Questions