Question

I have this jquery code to move between images by fading the current image out, and fading the next one in . but when it reach the final one. it most back to the first and fade it in again ..

var size = $("#place-gallery1 li").size();
//   alert(size);
$("ul#place-gallery1 li").click(function(){
    $(this).fadeOut(500,function(){
        var nextId= parseInt($(this).attr("id"))+1;
        if (nextId>size) nextId=1;
        alert(nextId);
        $("ul#place-gallery1 li#"+nextId).fadeIn(600);
    });             
});

html :

<ul class="place-gallery" id="place-gallery1">
    <li id="1" class="show-img"><img src="images/img1.jpg" width="237px" height="237px"/></li>
    "<li id="2" class="hide-img"><img src="images/img2.jpg" width="237px" height="237px" /></li>
    "<li id="3" class="hide-img"><img src="images/img3.jpg" width="237px" height="237px" /></li>
    "<li id="4" class="hide-img"><img src="images/img4.jpg" width="237px" height="237px" /></li>
</ul>

but when it reach the final li, it didn’t back to first as the code has to do

Answer 1

This is an example of the pictures rotating every 5 seconds:

function changeImages() {
  var active_event = $("#place-gallery1 li:visible");
  var next_event = active_event.next();
  if(next_event.size() == 0) next_event = $("#place-gallery1 li:first");
  active_event.fadeOut(500);
  next_event.fadeIn(500);
}

setInterval("changeImages()", 5000);

If you want to change the images onClick, just remove the setInterval and call the changeImages() function directly.