Forums

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

karlpcrowley

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

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

};

karlpcrowley

Lol I was so close :)

treehouse : what would you like to learn today?

Forums

How do I get this script to NOT loop?