Question

I’m using this script from Marco Kuiper and it really works amazingly well. My only issue is I don’t want this slideshow to loop. Can anybody help me figure how how to get this script to just run once? I suspect it has something to do with the setInterval function, but I only enough Javascript to play around and not enough to write (although I’m learning slowly). Thanks in advance!

Link to script as well:

http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

     /*
     * Author:      Marco Kuiper (http://www.marcofolio.net/)
     */

     // Speed of the automatic slideshow
     var slideshowSpeed = 7000;

     // Variable to store the images we need to set as background
     // which also includes some text and url's.
     var photos = [ {
    "title" : "Stairs",
    "image" : "dove.jpg",
    "url" : "http://www.sxc.hu/photo/1271909",
    "firstline" : "Imagine a Day of Peace.",
    "secondline" : "",
    "thirdline" : ""
}, {
    "title" : "Office Appartments",
    "image" : "prayer.jpg",
    "url" : "http://www.sxc.hu/photo/1265695",
    "firstline" : "",
    "secondline" : "Imagine a day where the world unites,<br><br> for one purpose",
    "thirdline" : ""
}, {
    "title" : "Mountainbiking",
    "image" : "trees.jpg",
    "url" : "http://www.sxc.hu/photo/1221065",
    "firstline" : "",
    "secondline" : "",
    "thirdline" : "To take a day, to feel what it would be like..."
}, {
    "title" : "Mountains Landscape",
    "image" : "ocean.jpg",
    "url" : "http://www.sxc.hu/photo/1271915",
    "firstline" : "...to have a world at",
    "secondline" : "",
    "thirdline" : ""
}
     ];



jQuery(document).ready(function() {

 jQuery("#headerimgs").css({"display":"none"}); 
jQuery("#headerimgs").fadeIn(2000); 

// Backwards navigation
jQuery("#back").click(function() {
    stopAnimation();
    navigate("back");
});

// Forward navigation
jQuery("#next").click(function() {
    stopAnimation();
    navigate("next");
});

var interval;
jQuery("#control").toggle(function(){
    stopAnimation();
}, function() {
    // Change the background image to "pause"
    jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

    // Show the next image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
});


var activeContainer = 1;    
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};

var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
    animating = true;

    // Make sure the new container is always on the background
    currentZindex--;

    // Set the background image of the new active container
    jQuery("#headerimg" + activeContainer).css({
        "background-image" : "url(images/" + photoObject.image + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

     // Hide the header text
    jQuery("#headertxt").css({"display" : "none"});

    // Set the new header text
    jQuery("#firstline").html(photoObject.firstline);
    jQuery("#secondline")
        .attr("href", photoObject.url)
        .html(photoObject.secondline);
    jQuery("#thirdline")
        .attr("href", photoObject.url)
        .html(photoObject.thirdline);
    jQuery("#pictureduri")
        .attr("href", photoObject.url)
        .html(photoObject.title);



    // Fade out the current container
    // and display the header text when animation is complete
    jQuery("#headerimg" + currentContainer).fadeOut(2000,function() {

        setTimeout(function() {
            jQuery("#headertxt").fadeOut({duration:1000});
            jQuery("#headertxt").fadeIn({duration:1000});
            animating = false;
        }, 300);
    });
};

var stopAnimation = function() {
    // Change the background image to "play"
    jQuery("#control").css({ "background-image" : "url(images/btn_play.png)"          });

    // Clear the interval
    clearInterval(interval);
};

// We should statically set the first image
navigate("next");

// Start playing the animation
interval = setInterval(function() {
    navigate("next");
}, slideshowSpeed);
     });

Answer 1

If you want it to go once through the images and then stop, you can change the navigation function like this (adding the lines with a comment by them). This new code looks for the cases where the slide index was going to wrap around and when it sees that, it stops the interval and doesn’t show the new slide – effectively stopping the slideshow.

var navigate = function(direction) {
    // Check if no animation is running. If it is, prevent the action
    if(animating) {
        return;
    }

    // Check which current image we need to show
    if(direction == "next") {
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
            stopAnimation();                     // add this
            return;                              // add this
        }
    } else {
        currentImg--;
        if(currentImg == 0) {
            currentImg = photos.length;
            stopAnimation();                     // add this
            return;                              // add this
        }
    }

    // Check which container we need to use
    var currentContainer = activeContainer;
    if(activeContainer == 1) {
        activeContainer = 2;
    } else {
        activeContainer = 1;
    }

    showImage(photos[currentImg - 1], currentContainer, activeContainer);

};