Grow your CSS skills. Land your dream job.

How do I get this script to NOT loop?

  • # March 21, 2012 at 6:12 pm

    Hi there guys,

    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,

    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);
    });
    # March 21, 2012 at 6:36 pm

    Haven’t tested this, but by looking at the code I would try
    replacing this

    if(currentImg == photos.length + 1) {
    currentImg = 1;
    }

    with this

    if(currentImg == photos.length + 1) {
    stopAnimation();
    }
    # March 21, 2012 at 6:36 pm

    @karlpcrowley very close and totally on the right track. Just needed that variable run in two locations along with return; to truncate the loop.

    Fixed through a StackOverflow answer! Here is the solution for those in need:

    http://stackoverflow.com/questions/9813735/how-do-i-get-this-script-to-not-loop

    “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);

    };
    # March 21, 2012 at 6:38 pm

    Lol I was so close :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".