How would I have a default slideshow of thumbnails, like gallerific ! and when

Question

0

Asked: May 22, 20262026-05-22T19:16:01+00:00 2026-05-22T19:16:01+00:00

How would I have a default slideshow of thumbnails, like gallerific ! and when

0

How would I have a default slideshow of thumbnails, like gallerific! and when the user clicks the thumbnail, have 4-5 slides (say, five different takes of a flower) then be the slideshow.

Or, alternatively, how to have many galleries, and one script that displays the first image of each in a slideshow?

Thanks @thastark. That takes care of the above request. Can someone suggest how to take NIVO Slider and use it’s autoplay (for the 3 big images) and caption?

OR here’s my attempt at altering the suggested script in this thread to get the 3 big images rotating:

<div id="main">
<div id="pages">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
       <div class="item"><img id = "img1" class= "active" src= "images/main_img1.jpg"></img></div>
       <div class="item"><img id = "img2"  src= "images/main_img2.jpg"></img></div>
       <div class="item"><img id = "img3"  src= "images/main_img3.jpg"></img></div>
       <div class="item"><img id = "img4"  src= "images/main_img4.jpg"></img></div>
   </div>
</div></div></div></div>

current_string = $("#main img.active").attr('id');
current = current_string.charAt(3); //get the current image number
current++;
if (current > 4){ //check if current image is the last image display first image
    current = 1;
}
current_string = "img" + current;
$("#main img.active).removeClass('active').fadeOut(1000, function(){ //fadeOut existing image
    $("#main img").each(function(){
        if($(this).attr('id') == current_string){
            $(this).addClass('active').fadeIn(1000) //fadeIn next image
        }
    });
});