Question

I have been trying create a gallery for my website but i couldn’t solve the problem with changing the thumbnails with the large one from the dynamic id’s.

Here is what i would like to do:

I had two separated unordered lists. First one holds the large pictures the second one holds the thumbs. Both list items has the same id numbers but different id names. Large pictures’ id’s are preview-1, preview-2, etc. and the Thumbnails id’s are thumbnail-1,thumbnail-2,etc.

I want to change the thumbnail pictures with the same id number of the large when the user click on it.

For example: If i click on the id=”thumbnail-3″ then the large img id=”preview-3″ should fadein immediately after the current large image fading out.

Here is my sample HTML

<ul class="previews">
<li id="preview-10"><a class="gallery product_2 jqzoom" href="foto1_lg.jpg"><img width="314" height="450" src="foto1.jpg"></a></li>
<li id="preview-11"><a class="gallery product_2 jqzoom" href="foto2_lg.jpg"><img width="314" height="450" src="foto2.jpg"></a></li>
<li id="preview-12"><a class="gallery product_2 jqzoom" href="foto3_lg.jpg"><img width="314" height="450" src="foto3.jpg"></a></li>
<li id="preview-13"><a class="gallery product_2 jqzoom" href="foto4_lg.jpg"><img width="314" height="450" src="foto4.jpg"></a></li>
<li id="preview-14"><a class="gallery product_2 jqzoom" href="foto5_lg.jpg"><img width="314" height="450" src="foto5.jpg"></a></li>
<li id="preview-15"><a class="gallery product_2 jqzoom" href="foto6_lg.jpg"><img width="314" height="450" src="foto6.jpg"></a></li>

This is the large image box

And..

<ul class="thumbnails">
<li id="thumbnail-10"><img width="70" height="70" src="tn1.jpg"></li>
<li id="thumbnail-11"><img width="70" height="70" src="tn2.jpg"></li>
<li id="thumbnail-12"><img width="70" height="70" src="tn3.jpg"></li>
<li id="thumbnail-13"><img width="70" height="70" src="tn4.jpg"></li>
<li id="thumbnail-14"><img width="70" height="70" src="tn5.jpg"></li>
<li id="thumbnail-15"><img width="70" height="70" src="tn6.jpg"></li>

this is the thumbnail box.

I hope you guys help me on this one.

Thanks!

UPDATED

By the way, Is there any chance to add .current class to the selected thumbnail? The previously selected ones should be disappear when the user clicked?

Answer 1

If both lists are in the same order, I mean thumbnail and it’s corresponding preview are in the same place in their lists, then your problem can be solved even without using these ids at all.

Solution using id

$('ul.thumbnails > li').click(function() {
    var preview_id = 'preview-' + $(this).attr('id').split('-')[1];

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('#'+preview_id).fadeIn();
    }); 
});

Without using id

$('ul.thumbnails > li').click(function() {
    var thumb_number = $(this).index();

    $('ul.previews > li:visible').fadeOut('normal', function() {
            $('ul.previews > li').eq(thumb_number).fadeIn();
    }); 
});

Both solutions imply that there is always at least one preview visible at a time. Otherwise fadeIn function will not be called.