Quick Version
For my online resume I decided to create a slideshow of recommendations from my coworkers. I wanted this display to be unobtrusive and to fade in and out so that it does not intrude on the visitor’s experience. I included player controls so that those interested in the quotes can toggle through them at their own pace or halt it completely if the animation is annoying. I checked out a few slideshow examples but all of them seemed to lack all the features I wanted. Fade transitions, pause/play/next/previous buttons, and most importantly grabbing my content directly from my page. I don’t want to have a ton of strings hardcoded into my javascript file. We should be using best practices and leaving the content on the page and the javascript just handles manipulation of it. So here is the code and it is of course good for any content, not just quotes.
First, a working example:
Now, an explanation.
1. Create some player buttons to handle next, prev, pause and play
2. Create a container div that we will fade in and out.
3. Create content item divs that we will show in the container.
4. When the container div is completely faded out you can swap new content in without the user noticing
5. Tie the player buttons to your content control and we are all done!
Here is what your pages’ html should look like. We have the slideshow controls, a container which we will fade in and out and a series of content items that we wish to show. In this case I am using text, but you could use anything. The play/pause buttons occupy the same space so we set the play button to not display. We will then toggle between them using javascript.
The player controls:
<!-- Previous, Pause, Play, Next images --> <div id="playercontrols"> <img src="previous.png" alt="Previous" onclick="PrevClick()" onmouseover="this.src='previoushover.png'" onmouseout="this.src='previous.png'" /> <img id="pauseimg" src="pause.png" alt="Pause" onclick="PausePlayClick(false)" onmouseover="this.src='pausehover.png'" onmouseout="this.src='pause.png'" /> <img id="playimg" src="play.png" alt="Play" style="display: none;" onclick="PausePlayClick(true)" onmouseover="this.src='playhover.png'" onmouseout="this.src='play.png'" /> <img src="next.png" alt="Next" onclick="NextClick()" onmouseover="this.src='nexthover.png'" onmouseout="this.src='next.png'" /> </div>
The content:
<div id="contentContainer"> <div id="content0" style="display: none;">Text</div> <div id="content0" style="display: none;">Slideshow</div> <div id="content0" style="display: none;">With</div> <div id="content0" style="display: none;">Fades</div> </div>
You can see above that I inline coded each of the content divs to display: none, but I would recommend handling this in your css. This bit tells all divs inside of contentContainer to not display.
div#contentContainer > div { display: none; }
Next we move on to our javascript. Here are the globals to control the system.
var TimeToFade = 500.0; //time to fade in and fade out var timeToShow = 3000.0; //how long to display each piece of content var timeToRest = 750; //how long to wait before displaying next piece of content var currentContentItem = 0; //which content item you wish to start with, zero based var contentContainer; //the containing div var contentItems; //all the content items var fadeOutTimer; //timer for handling fade outs var fadeInTimer; //timer for handling fade ins
An explanation of our entry point, CycleQuotes()
1. Get the contentContainer
2. Get all the content items
3. Set the first item to visible so the user has something to look at on page load
4. call setTimeout to start the player
function CycleQuotes()
{
//get all the divs inside the contentContainer div. Each of these is a unique quote
contentContainer = document.getElementById("quotes");
contentItems = contentContainer.getElementsByTagName("div");
contentItems[0].style.display = "block"; //all child divs are currently hidden so show the first one
setTimeout("FadeQuote()", timeToShow);
}
Fading
The magic of fading between content items happens in the FadeOut and FadeIn functions. This is a recursive pair that rely on timers to hide and show the content. These in turn call fade->animatefade which I got from switchonthecode.
1. Fade out current item and set a timer to fade in the next item
2. When timer is up Fade in next item and set a timer to fade it out
3. Repeat ad nauseum
//Fade out quote
function FadeOut()
{
fade(contentContainer.id);
fadeOutTimer = setTimeout("FadeIn()", TimeToFade + timeToRest);
}
//Fade new quote in
function FadeIn()
{
//hide the current quote (the container div will already have opacity set to 100% so this quote is currently invisible)
contentItems[currentContentItem].style.display = "none";
//show the next quote
if (currentContentItem == contentItems.length - 1) { currentContentItem = 0; } else { currentContentItem++; }
contentItems[currentContentItem].style.display = "block";
//fade in the container
fade(contentContainer.id);
//recurse
fadeInTimer = setTimeout("FadeOut()", timeToShow);
Player Controls
Next we code in handlers for our Previous, Next, Play, and Pause button clicks. The PrevClick and NextClick buttons stop the slideshow and then activate the next content item. The PausePlayClick button handles starting/stopping the player and takes a boolean to indicate the state to invoke.
function PrevClick()
{
PausePlayClick(false);
//make sure the current quote is displayed
contentItems[currentContentItem].style.display = "none";
//change the current quote
if (currentContentItem == 0)
{ currentContentItem = contentItems.length - 1; }
else
{ currentContentItem--; }
contentItems[currentContentItem].style.display = "block";
}
function NextClick()
{
PausePlayClick(false);
//make sure the current quote is displayed
contentItems[currentContentItem].style.display = "none";
//change the current quote
if (currentContentItem == contentItems.length - 1) { currentContentItem = 0; }
else { currentContentItem++; }
contentItems[currentContentItem].style.display = "block";
}
function PausePlayClick(playing)
{
//get the play/pause buttons
var playbutton = document.getElementById('playimg');
var pausebutton = document.getElementById('pauseimg');
//start/stop the current fade effects
if (playing)
{
//change play icon to pause
pausebutton.style.display = "";
playbutton.style.display = "none";
setTimeout("FadeQuote()", 0);
}
else
{
//make sure we have a quote showing
if (contentContainer.FadeState < 0) { fade(contentContainer.id); }
//change pause icon to play icon
pausebutton.style.display = "none";
playbutton.style.display = "";
//stop timers
clearTimeout(fadeOutTimer);
clearTimeout(fadeInTimer);
}
