JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Multiple Slide Shows

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

 

Scripts needed (copy and paste inside <head>)


<script type="text/javascript" src="http://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
})})})})})
};