How do I get this script to NOT loop?

[Luminated]

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

});

[Luminated]

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



};

[Author]

Posts