Slideshow With Fading Images

A HunBug Document
Document No.: 11510
Last Updated: 01 Apr 2008
Author: HunBug

Image slideshows are an effective way to display several images. Our fading image slideshow fades each image in and out, with you defining the speed of the fade and the time that the image is displayed before fading out. Additionally the user can hover the mouse over the image to show the solid image.

The Javascript File

This Javascript contains the standard library code for the slideshow. Copy and paste this into a file, EG: slideshowfade.js

//=======================
//
// Fading Image Slideshow
//
// http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11510
//
//=======================


var slideshowFadeAnimate = new Array();
var slideshowFadeTimer   = new Array();
var slideshowFadeCount   = new Array();
var slideshowFadeImages  = new Array();


//======================


function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
{

  if(cl)
    cl = ' class="'+cl+'"';

  document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');

  var ss = document.getElementById(id+'img');
  if(ss.addEventListener)
  {
    ss.addEventListener('mouseover',function(){slideshowFadeMouseover(id)},false);
    ss.addEventListener('mouseout',function(){slideshowFadeMouseout(id)},false);
  }
  else if(ss.attachEvent)
  {
    ss.attachEvent('onmouseover',function(){slideshowFadeMouseover(id)});
    ss.attachEvent('onmouseout',function(){slideshowFadeMouseout(id)},false);
  }
 
  slideshowFadeCount[id]   = 0;
  slideshowFadeImages[id]  = imageArray;
  slideshowFadeAnimate[id] = 'run';
  slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);

}


//======================


function slideshowFadeAnimation(id,holdTime)
{
  if(slideshowFadeAnimate[id]=='run')
  {
    var obj = document.getElementById(id+'img');
    var opa = slideshowFadeCount[id]%200;

    if(opa==0)
    {
      slideshowFadeAnimate[id] = 'load';
      obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
    }
    else if(opa==100)
    {
      slideshowFadeAnimate[id] = 'hold';
      setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
    }
    else if(opa>100)
      opa = 200-opa;
      
    obj.style.opacity = (opa/100).toString();
    obj.style.filter  = "alpha(opacity="+opa.toString()+")";
    
    slideshowFadeCount[id]++;
    
    if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
      slideshowFadeCount[id]=0;
  }
}


//======================


function slideshowFadeMouseout(id)
{
  if(slideshowFadeAnimate[id]=='mouseover')
    slideshowFadeAnimate[id] = 'run';
}


//======================


function slideshowFadeMouseover(id)
{
  if(slideshowFadeAnimate[id]=='run')
  {
    slideshowFadeAnimate[id] = 'mouseover';
    var obj = document.getElementById(id+'img');
    obj.style.opacity = "1";
    obj.style.filter  = "alpha(opacity=100)";
    slideshowFadeCount[id] = (Math.floor(slideshowFadeCount[id]/200)*200)+101;
  }
}


//======================


function slideshowFadeRun(id)
{
  slideshowFadeAnimate[id] = 'run';
}


//======================

Slideshow Function

There are several functions within the Javascript, however only one should ever be called directly from the main web page. This is the "slideshowFade" function, which has five parameters to control the image show.

  • id: Each slideshow is contained within a DIV element, which is created by the slideshow function. This "id" parameter is the id value that will be given to this DIV element, allowing you to use CSS to manipulate the style of the slideshow. An image element is created within the DIV and given the id value plus img. IE id=slideshow1, the image element will be slideshow1img.
  • cl: Optional parameter for the class of the DIV element, allowing further CSS control. (The parameter name has been shorten from "class", which would be more meaningful, due to issues with IE)
  • imageArray: The pointer to the array of image file paths to be used
  • fadeInterval: The speed that the image should fade in and out, in 1/1000 of a second.
  • holdTime: The time that the solid image is held for before fading out, in 1/1000 of a second.

Example HTML Page

This example shows hows to incorporte the slideshow into a HTML page.

<html>

  <head>
 
    <script type="text/javascript" src="slideshowfade.js"></script>

    <style>
      #Slideshow1 img { width:500px }
    </style>

  </head>
 
  <body>
 
    <h1>Image Slideshow</h1>

    <script>

      var imgArray = new Array();
      imgArray[0] = "images/squeeze.jpg";
      imgArray[1] = "images/pat.jpg";
      imgArray[2] = "images/turner.jpg";

      slideshowFade('Slideshow1','',imgArray,20,5000);
    
    </script>
    
  </body>
 
</html>

The slideshowfade.js script is added in the head section using the script tag. The example assumes that the slideshowfade.js file is in the same directory.

A second script tag in the body creates the slideshow at that point in the page. The example has three images in the slideshow but you can have as many as you wish. Access paths from the web page should also be included.
The call to the slideshowFade function gives the id parameter for the DIV element a value of "Slideshow1", gives no class value, sets the fade interval to 50 times a second (making each fade take 2 seconds) and sets the solid image hold time to 5 seconds.

A style is set for "#Slideshow1 img" to set the width of the slideshow image. Other CSS properties can also be set, such as background colour, border properties, etc.

Reusable

Once the slideshow code has been copied to the slideshowfade.js file and linked to the required pages, the code can be reused, even adding several slideshows to the same page.

Further Reading

Slideshow With Merging Images: Slideshow along similar lines, although the images merge rather than fade in/out.
Daily Background Image: Use Javascript to set the background image of an element, changing the image each day.
HunBug Store








Comments are all individually read, none are automatically posted to the site.