Useful Stuff About:

Multiple Slide Shows

This is an example of multiple slide shows cycling through a set of photos with

customizable unique photos in each slideshow - can be any size but all photos in a particular slideshow must be the same dimensions
currently limited to 5 photos per slideshow but this can be modified to a different maximum number of photos that is the same for all slideshows
customizable delayed start time to each slideshow
customizable fade transition time between photos
no limit to number of slideshows per page and code is written so that all slideshows use the same jquery function

Scripts needed (copy and paste inside <head>)


  
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="path_to_javascript_file.js"></script><!--adjust this as needed-->

Here's the html code

You'll have to obviously change the filepaths in the code below to match the real path to your images



<div class="slideShowBox" id="slideShowBox1">
   <img src="images/s1/1.png"/>
   <img src="images/s1/2.png"/>
   <img src="images/s1/3.png"/>
   <img src="images/s1/4.png"/>
   <img src="images/s1/5.png"/>
</div>
<div class="slideShowBox" id="slideShowBox2">
   <img src="images/s2/1.png"/>
   <img src="images/s2/2.png"/>
   <img src="images/s2/3.png"/>
   <img src="images/s2/4.png"/>
   <img src="images/s2/5.png"/>
</div>
<div class="slideShowBox" id="slideShowBox3">
   <img src="images/s3/1.png"/>
   <img src="images/s3/2.png"/>
   <img src="images/s3/3.png"/>
   <img src="images/s3/4.png"/>
   <img src="images/s3/5.png"/>
</div>
<div class="slideShowBox" id="slideShowBox4">
   <img src="images/s4/1.png"/>
   <img src="images/s4/2.png"/>
   <img src="images/s4/3.png"/>
   <img src="images/s4/4.png"/>
   <img src="images/s4/5.png"/>
</div>

Here's the CSS

You'll have to change the actual width and height values below to match your design



.slideShowBox {
	overflow:hidden;
	position:relative;
	float:left;
	margin-right:40px;
}
.slideShowBox img {
	position:absolute;
	top:0;
	left:0;
}
#slideShowBox1, #slideShowBox1 img {
	width:125px;
	height:125px;	
}
#slideShowBox2, #slideShowBox2 img {
	width:150px;
	height:150px;	
}
#slideShowBox3, #slideShowBox3 img {
	width:175px;
	height:175px;	
}
#slideShowBox4, #slideShowBox4 img {
	width:200px;
	height:200px;	
}

Here's the javascript code


  
        /*
	Multiple 5 photo slide shows
	Written by Leo Florendo
	Freestyle Academy 2013
	This code is for 5 photo slide shows that cycle through in order.
	It can be used for multiple instances of the slideshow with different photos in a single page.
	A div with class of slideShowBox must contain 5 images
	*/
	//Resets the order of each image in the same order of insertion
	function setZIndex(){
		$(".slideShowBox img:nth-child(1)").css({"z-index":"5"});
		$(".slideShowBox img:nth-child(2)").css({"z-index":"4"});
		$(".slideShowBox img:nth-child(3)").css({"z-index":"3"});
		$(".slideShowBox img:nth-child(4)").css({"z-index":"2"});
		$(".slideShowBox img:nth-child(5)").css({"z-index":"1"});
	}
	setZIndex();
	//set initial variables
	var fadeTime=250, durationTime = 4000, delayTime = durationTime - fadeTime;
	//Copy, paste and adjust each line below for every slideshow animation
	//The blue text is the id of the div that contains the images and that div MUST have a class of slideShowBox
	//The red number is the delay time to start the fading of photos for that particular slideshow
	var startTimer1 = setTimeout(function(){slideShow("#slideShowBox1")},0);
	var startTimer2 = setTimeout(function(){slideShow("#slideShowBox2")},1000);
	var startTimer3 = setTimeout(function(){slideShow("#slideShowBox3")},2000);
	var startTimer4 = setTimeout(function(){slideShow("#slideShowBox4")},3000);
	function slideShow(targetDiv){
		window.clearTimeout(startTimer1, startTimer2, startTimer3, startTimer4);//add in every startTimer you have above
		//Don't change anything below!!!!!!
		var targetImg;
		targetImg = targetDiv + " img:nth-child(1)";
		$(targetImg).delay(delayTime).animate({//fades out 1st image
			"opacity":"0"	
		},fadeTime, function(){//executes when 1st image fade out is complete
		targetImg = targetDiv + " img:nth-child(2)";
		$(targetImg).delay(delayTime).animate({//fades out 2nd image
			"opacity":"0"	
		},fadeTime, function(){//executes when 2nd image fade out is complete
		targetImg = targetDiv + " img:nth-child(3)";
		$(targetImg).delay(delayTime).animate({
			"opacity":"0"	
		},fadeTime, function(){
		targetImg = targetDiv + " img:nth-child(4)";
		$(targetImg).delay(delayTime).animate({
			"opacity":"0"	
		},fadeTime, function(){
		targetImg = targetDiv + " img:nth-child(1)";
		$(targetImg).delay(delayTime).animate({
			"opacity":"1"	
		},fadeTime,function (){//executes when 1st image fade IN is complete
			targetImg = targetDiv + " img";
			$(targetImg).css({//makes ALL images visible and ready to fade out again
				"opacity":"1"	
			});
			slideShow(targetDiv);//restarts the sequence again for the same targetDiv
		})})})})})
	};