JQuery: Every 5 seconds, automatically click on the next image in the list?

Question

I have a list of images presented as thumbnails:

<ul id="thumbs"> <li class="small-img"><img src="images/feature1.png" /></li> <li class="small-img"><img src="images/feature2.png" /></li> <li class="small-img"><img src="images/feature3.png" /></li> </ul> 

I am using jQuery so that when the user clicks on the image, it replaces the displayed image in a div (which I got https://stackoverflow.com/a/165778/ ):

 $('#thumbs img').click(function(){ $('div.feature-photo img').hide().attr('src',$(this).attr('src')).fadeIn(); }); 

My question is: is there a way to do this in a slide show? Maybe automatically "click" in the next picture every 5 seconds? does setInterval play a role in this? I try to be really basic in this, and not use more plugins than necessary. (But if there is no other way, I will consider it.)

Thank any help.

Answer 1

You can easily calculate the next image in the switch function. This way you will not ruin your var space;)

 (function switchToImage(img) { $(img).click() var images = $('#thumbs img'); var nextIndex = ($.inArray(images, img) + 1) % images.length; setTimeout(function() { switchToImage(images[nextIndex]) }, 5000); })($('#thumbs img')[0]); 

Answer 2

You can go with a simple jQuery way if you want. Here is my attempt

 var intervalId; $(function(){ function cycleImage(){ var onLastLi = $("#thumbs li:last").hasClass("current"); var currentImage = $("#thumbs li.current img"); var targetImage = $('div.feature-photo img'); $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn(); var currentLi = $("#thumbs li.current"); currentLi.removeClass("current"); if(onLastLi){ $("#thumbs li:first").addClass("current"); }else{ currentLi.next().addClass("current"); } }; intervalID = setInterval(cycleImage, 5000); }) 

And you can find it in action here

Answer 3

setInterval might be the answer to your question

 var currImg = 0; var $images; $(document).ready(function() { $images = $('#thumbs img'); changeImg(); window.setInterval(function() { currImg++; if(currImg == $images.length) currImg = 0; changeImg(); }, 5000); }); function changeImg() { $('div.feature-photo img').hide().attr('src',$images.eq(currImg).attr('src')).fadeIn(); } 

Answer 4

You need to think about what your code should do, not what the user does that runs your code. So instead of automatically clicking, you just want your code to automatically display the next image.

So, the first step is to move the code from the click handler:

 function showImage(img){ $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); } $('#thumbs img').click(function() { showImage(this); }); 

And then the question arises: how can I call showImage every five seconds the "next" image. Well, first we want to remember what the "current" image is. Easy enough to modify our showImage to do this:

 var current = null; function showImage(img){ current = img; $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); } 

So, we just need the trigger to happen after five seconds. You can use setInterval , but it’s very easy for me to get it out of control, so instead I use the setTimeout chain, where each sets the next. And what would be a good incentive for this? Well, five seconds after the user clicks on the image, perhaps right there in showImage :

 var current = null; var timer = 0; function showImage(img){ current = img; $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); if (timer) { clearTimeout(timer); } timer = setTimeout(nextImage, 5000); } 

Ok, so what should nextImage look nextImage ? I would say we probably want to use current , perhaps:

 function nextImage() { var $current; if (timer) { clearTimeout(timer); timer = 0; } if (current) { $current = $(current); next = $current.nextAll("img")[0]; if (!next) { $current.siblings("img")[0]; } if (next) { showImage(next); } } } 

You can start the game again by showing the first image:

 showImage($("#thumbs img")[0]); 

So, we will unite everything together and making sure that we wrap it in the function of determining the scope, so we do not create global symbols:

 (function() { var current = null; var timer = 0; function showImage(img){ current = img; $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn(); if (timer) { clearTimeout(timer); } timer = setTimeout(nextImage, 5000); } function nextImage() { var $current; if (timer) { clearTimeout(timer); timer = 0; } if (current) { $current = $(current); next = $current.nextAll("img")[0]; if (!next) { $current.siblings("img")[0]; } if (next) { showImage(next); } } } $('#thumbs img').click(function() { showImage(this); }); showImage($("#thumbs img")[0]); })(); 

(Or instead of the vanilla panorama function, you can use jQuery ready .)

The above is pretty rude and completely untested, but you get the idea.

Answer 5

you can use

 setTimeout(function(){ //trigger next picture} ,5000); 

But you must remember that if the user reloads the page, the wait time starts from scratch!