I want to make a loop in my function so that the slideshow effect always restarts.

Here's my fiddle : /

It's all good for the image 1 to go to image 2, but I want it to fade it back to the image 1, and then go the image 2, and so on...to always loop like that.

What do I need to add in my code to make this work?

I want to make a loop in my function so that the slideshow effect always restarts.

Here's my fiddle : http://jsfiddle/Be67B/

It's all good for the image 1 to go to image 2, but I want it to fade it back to the image 1, and then go the image 2, and so on...to always loop like that.

What do I need to add in my code to make this work?

• javascript
• jquery
• html

6 Answers 6

Don't use a loop, just ask the browser to repetitively call your animation step :

setInterval(function(){
   // your animation (in fact just a step)
}, someDelay);

Demonstration : http://jsfiddle/dystroy/nPh6S/

In this precise case, the animation is done with :

setInterval(function(){
    $("#top").fadeOut(function() {
        $(this).attr("src","http://1.bp.blogspot./-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
            $(this).attr('src', 'http://coreldrawtips./images/applebig.jpg').fadeIn().delay(1000);
        });
     }
    );
}, 4000);  

see this jquery cycle plugin:

http://jquery.malsup./cycle/

may be this is what you want

You can create a function that does the transition, which has a callback function as part of the fadeIn method that will call back to itself to trigger the next transition, and it would just be in a constant loop.

Here's your modified jsfiddle: http://jsfiddle/Be67B/1/

HTML:

<img id="top" src="http://coreldrawtips./images/applebig.jpg" width="300" height="300" />​

Javascript:

$(document).ready(function(){
  transition(false);
});

function transition(first)
{
    var src = first ? "http://coreldrawtips./images/applebig.jpg" : "http://1.bp.blogspot./-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";

    $("#top").delay(1000).fadeOut(function() {
        $(this).attr("src",src).fadeIn(function() {
            transition(!first);
        });
    });    
}
    ​

I just made this code:

$(document).ready(function(){
   // images in the pool
   var images=["http://1.bp.blogspot./-cFt5KNrHsHc/TZMH6XUBu-     I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
           "http://1.bp.blogspot./-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];

      // next image to display
      var next = 0;

      // interval beetween images
      var INTERVAL = 1000;

      // main function
      var doCarrousel = function() {
         $("#top").fadeOut(function() {
             $(this).attr("src", images[next]).fadeIn(
                 function() {
                   setTimeout(doCarrousel, INTERVAL);
                 });
          });
          if (++next >= images.length)
             next = 0;
       };

       //start carrousel
       doCarrousel();
});

fiddler: http://jsfiddle/Be67B/

I would use a plugin. But you can do it by hand. I just remend against changing the src of the images, because some browsers don't handle it very well, like safari not firing load event.

Instead, have all images inside a container, and cycle their visibility:

$(document).ready(function(){
    var currentImage = $("#images img:first");

    setInterval(function(){
        currentImage.fadeOut();

        if(currentImage.next().size())
            currentImage = currentImage.next();
        else
            currentImage = currentImage.siblings().first();

        currentImage.fadeIn();
    }, 1000)
});

See fiddle: http://jsfiddle/Be67B/2/

Quick and dirty: jsFiddle example

function swap(img) {
    img = (img == 'http://coreldrawtips./images/applebig.jpg') ? 'http://1.bp.blogspot./-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips./images/applebig.jpg';
    $('#top').delay(2000).fadeOut(function() {
        $(this).attr('src', img)
    }).fadeIn(function() {
        setTimeout(function() {
            swap(img)
        }, 1000);
    });
};
swap($('#top').attr('src'));​