Slideshow With Merging Images

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

Image slideshows are an effective way to display several images. Our merging image slideshow merges the transition between each image, with you defining the speed of the merge and the time that the image is displayed before changing.

The Javascript File

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

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

var slideshowMergeAnimate = new Array();
var slideshowMergeTimer   = new Array();
var slideshowMergeCount   = new Array();
var slideshowMergeImages  = new Array();

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

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

  for(i=0;i<imageArray.length;i++)
  {
    var imgLoad = new Image();
    imgLoad.src = imageArray[i];
  }

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

  document.write('<div id="'+id+'"'+cl+' style="position:relative">');
  document.write('<img id="'+id+'img1" style="position:absolute; top:0px; left:0px;" onload="slideshowMergeRun(\''+id+'\')"/>');
  document.write('<img id="'+id+'img2" style="position:absolute; top:0px; left:0px;display:none;"/></div>');
 
  slideshowMergeCount[id]   = 0;
  slideshowMergeImages[id]  = imageArray;
  slideshowMergeAnimate[id] = 'run';
  slideshowMergeTimer[id]   = setInterval('slideshowMergeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);

}

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

function slideshowMergeAnimation(id,holdTime)
{
  if(slideshowMergeAnimate[id]=='run')
  {
    var obj1 = document.getElementById(id+'img1');
    var obj2 = document.getElementById(id+'img2');

    var opa  = slideshowMergeCount[id]%100;

    if(opa==0)
    { 
      if(obj1.src)
      {
        slideshowMergeAnimate[id] = 'hold';
        setTimeout('slideshowMergeRun(\''+id+'\')',holdTime);
        obj2.src = obj1.src;
        obj2.style.display = 'block';
      }
    }
    else if(opa==1)
    {
      slideshowMergeAnimate[id] = 'load';
      obj1.src = slideshowMergeImages[id][Math.floor(slideshowMergeCount[id]/100)%slideshowMergeImages[id].length];
    }
     
    obj1.style.opacity = (opa/100).toString();
    obj1.style.filter  = "alpha(opacity="+opa.toString()+")";
    obj2.style.opacity = ((100-opa)/100).toString();
    obj2.style.filter  = "alpha(opacity="+(100-opa).toString()+")";
    
    slideshowMergeCount[id]++;
   
    if(slideshowMergeCount[id]==(slideshowMergeImages[id].length*100))
      slideshowMergeCount[id]=0;
  }
}

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

function slideshowMergeRun(id)
{
  slideshowMergeAnimate[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 "slideshowMerge" 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>
 
    <style>
      #Slideshow1 img {height:250px; width:500px}
    </style>
   
    <script type="text/javascript" src="slideshowmerge.js"></script>

  </head>
 
  <body>
 
    <h1>Merging Slideshow</h1>

    <script>

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

      slideshowMerge('Slideshow1','',imgArray,20,5000);
   
    </script>

  </body>
 
</html> 

The slideshowmerge.js script is added in the head section using the script tag. The example assumes that the slideshowmerge.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 slideshowMerge 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" to set the height and width of the slideshow. This helps the layout, as the image elements have absolute positioning. You can also set styles for the image using "#Slideshow1 img", for other CSS properties such as background colour, border properties, etc.

Reusable

Once the slideshow code has been copied to the slideshowmerge.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 Fading Images: Slideshow along similar lines, although the images fade in and out rather than merge.
Daily Background Image: Use Javascript to set the background image of an element, changing the image each day.
Simple Slideshow: This basic slideshow has next and previous buttons to navigate between images. Very simple to implement.
HunBug Store








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