Customizable Javascript Fading Slideshow
This slide show code was the answer to a problem of using canned slideshow code (it can be hard to customize). It took some time to work out the tweaks, but all in all it works quite well. Basically it uses the classic position: absolute; css attribute to stack the images on top of each other and then use a timer to switch through the images and fade each one in and out. On top of that I added circular navigation links so that visitors could navigate to each image themselves and a space for laying text over the images.
This is the function I started with:
function transitionImages(){
if (i == 0) {
i = images.length - 1;
disappear();
i = 0;
} else {
i--;
disappear();
i++
}
setTransitionTime();
appear();
$("#fadeitshow-navigation ul li a").removeClass("active");
$('#' + buttons[i]).addClass('active');
i++;
if (i > images.length - 1) {
i = 0;
}
setTimeout(transitionImages, timeToTake);
}
The above function is launched at the end of the $(document).ready(function(){}); section of your script so that the slide only starts as the page is ready and continually loops back on it itself with the setTimeout(transitionImages, timeToTake); call.
The variable, timeToTake, is the variable I use to hold how long I want to display each image. The default setting is 5000 (in milliseconds). I set this variable using a function I created called, setTransitionTime(). This is the function that adds more functionality because in this function you can specify a slide number in the switch statement and set the amount of time you want to display it for. The code for that function is:
function setTransitionTime() {
switch (i) {
case 2: case 3:
timeToTake = 5000;
break;
case 0: case 1: case 4:
timeToTake = 10000;
break;
default:
timeTotake = 5000;
break;
}
}
The variable i is used to store the index for the array of images and links. It is counted through by the transitionImages() function. I know global variables are never good. But for the purpose of the slideshow it worked. Anyways, the web developer knows the place of the images in the array and therefore they would just test the counting variable and with that they can set the delay time.
Next I have the disappear and appear functions that are used to make the images appear and disappear. The code is as follows:
function disappear() {
$('#' + images[i]).animate({ opacity: "0.0" }, 1000);
}
function appear() {
$('#' + images[i]).animate({ opacity: "1.0" }, 1000);
}
The function disappear() selects the image in the array given the index i animates the css value opacity to 0 over 1000 milliseconds.
The appear function does the exact opposite.
Therefore, my whole fadeit.js slide show is:
/*This function checks the slide number and sets how long it should wait before going to the next slide. All slides are numbered by their attribute Id in home.asp they start at 0 to make them more accessible via an array.*/ function setTransitionTime() {
switch (i) {
case 2: case 3:
timeToTake = 5000;
break;
case 0: case 1: case 4:
timeToTake = 10000;
break;
default:
timeTotake = 5000;
break;
}
}
var i = 0; //image array counter
var timeToTake = 10000; //Time delay to scroll between images
/*This function goes through the process of transitioning the images in the slideshow*/
function transitionImages(){
if (i == 0) {
i = images.length - 1;
disappear();
i = 0;
} else {
i--;
disappear();
i++
}
setTransitionTime();
appear();
$("#fadeitshow-navigation ul li a").removeClass("active");
$('#' + buttons[i]).addClass('active');
i++;
if (i > images.length - 1) {
i = 0;
}
setTimeout(transitionImages, timeToTake);
}
function disappear() {
$('#' + images[i]).animate({ opacity: "0.0" }, 1000);
}
function appear() {
$('#' + images[i]).animate({ opacity: "1.0" }, 1000);
}
The only additions I made to make the buttons work was to add:
/*This section sets up the mouse events to animate the dot controls and to capture all the ids of the imgs in the fadeitshow container as well as the dot controls in the fadeitshow-navigation container*/
$('#fadeit').mouseenter(function () {
$('#fadeitshow-navigation ul li a').animate({ opacity: "1.0" }, 500);
});
$('#fadeit').mouseleave(function () {
$('#fadeitshow-navigation ul li a').animate({ opacity: "0.3" }, 500);
});
$("#fadeitshow-navigation ul li a").click(function () {
$("#fadeitshow-navigation ul li a").removeClass("active");
$(this).addClass("active");
i = $(this).attr('id');
setTransitionTime();
$('#fadeitshow ul li').animate({ opacity: "0.0" }, 0);
$('#fadeitshow-data ul li').animate({ opacity: "0.0" }, 0);
appear();
});
$('#fadeitshow ul li').each(function () {
var theId = $(this).attr("id");
images.push(theId);
});
$('#fadeitshow-navigation ul li a').each(function () {
var theId = $(this).attr("id");
buttons.push(theId);
});
/*******************************************************************/
to the $(document).ready(function(){}); section of my code. It grabs an array of the images and links. Then it sets the click events for the links.
For added style I made the links transparent in my style page so that they wouldn’t draw attention away from the picture and when the user hovers over the slideshow they come into view. With the code:
$('#fadeit').mouseenter(function () {
$('#fadeitshow-navigation ul li a').animate({ opacity: "1.0" }, 500);
});
$('#fadeit').mouseleave(function () {
$('#fadeitshow-navigation ul li a').animate({ opacity: "0.3" }, 500);
});
My style sheet is as follow. If someone requests me to explain it I will but right now I’m tired so here it is:
#fadeit
{
position:relative;
z-index:10;
width:690px;
margin-left:auto;
margin-right:100px;
margin-top:75px;
float:right;
background:orange;
}
#fadeitshow ul li
{
position:absolute;
visibility:visible;
opacity: 0.0;
}
#fadeitshow-navigation
{
width: 240px;
margin: 240px auto 75px 5px;
position:absolute;
}
#fadeitshow-navigation ul li
{
float:left;
visibility:visible;
}
#fadeitshow-navigation ul li a
{ display: block;
width: 20px;
height: 20px;
float: left; margin: 0 2px;
background-color: #FDE5A9;
text-indent: -9999px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border:3px solid #D7C1A1;
opacity:0.3;
}
#fadeitshow-navigation ul li a:hover
{
background-color:#ECA355;
}
#fadeitshow-navigation ul li a.active
{
background-color:#ECA355;
}
And here is the actual HTML. It is a simple outer div that holds all the other elements so it is modular. For the environment I built it for, I used a server side include statement so that I could separate it from the rest of the page and make it easier for someone to edit just the slideshow.
<li id=”ssPic0”><img src=path /></li>
<li id=”ssPic1”><img src=path/></li>
<li id=”ssPic2”><img src=path /></li>
<li id=”ssPic3”><img src=path/></li>
<div id=”fadeitshow-navigation”>
<li><a id=”0” href=”#”>Show pic 0</a></li>
<li><a id=”1” href=”#”>Show pic 1</a></li>
<li><a id=”2” href=”#”>Show pic 2</a></li>
<li><a id=”3” href=”#”>Show pic 3</a></li>
This code works and I will post a sample so that you can see the final product. Please Comment, especially if you have any suggestions to better the code.
As of this posting the site is still a working progress but with the help of the jQuery plugin scrollTo() it was extremely easy to make the page scrolls animated by clicking on the top UI bar. If someone would like to see a break down of the code please let me know.
