Home arrow JavaScript arrow Page 3 - Create Your Own DHTML Slideshow With a Fading Effect

Create Your Own DHTML Slideshow With a Fading Effect

Looking to add an image slideshow to your family or business web site? In this article Martin shows us exactly how it's done using DHTML...

Author Info:
By: Martin Tsachev
Rating: 4 stars4 stars4 stars4 stars4 stars / 51
December 14, 2002
  1. · Create Your Own DHTML Slideshow With a Fading Effect
  2. · The Script
  3. · The Slideshow Script
  4. · The Slideshow Script (contd.)
  5. · Conclusion

print this article

Create Your Own DHTML Slideshow With a Fading Effect - The Slideshow Script
(Page 3 of 5 )

var DHTML =
(document.getElementById || document.all || document.layers);
if (!DHTML) {
alert('Your browser is not capable of displaying DHTML');

function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
} else
if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
} else
if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];

function visib(objName, flag) { // triggers layer visibility
x = new getObj(objName);
x.style.visibility = (flag) ? 'visible' : 'hidden';

These are basic DHTML functions that I use for the slideshow by Peter Paul-Koch. I consider them self explanatory, but for the uninitiated:
  • First, we test for DHTML support (i.e. DOM1: the getElementById method, IE 4 the document.all collection, NN 4 the document.layers array). If there is such a method/array its toBoolean converted result is true otherwise it is false. If all evaluate to false then that means the browser does not support DHTML.
  • Having the DHTML variable described above, we check if the browser does not support DHTML, and if this is so then we inform the users that their browser won't show the slideshow properly.
  • The getObj function is used to handle browser incompatibilities. What it does is check which DOM is supported, and according to the result, creates an object and changes its obj and style properties with references to the style rules applied to the layer.
  • The visib function triggers the visibility of a layer and is used so that we don't have to call the getObj function manually.
In NN 4, if you want to get a reference to a sub layer, you have to use document.layers['parentLayer'].

slides = new Array( // The id's of the slides

var fadeOn = false;
function setFade(switchFade) {// Fade switch function
if ( !fadeOn ) {
prepLyr(slides[curImg], true);
} else { // No fade
for ( var i = 0; i < 8; i++ ) {
prepLyr(slides[i], true);
if ( slides[i] != slides[curImg] )
visib(slides[i], false);
fadeOn = switchFade;

Create an array of the id's of the slides. This array is used later when switching from one image to another. The setFade() function is used to turn the fading effects on and off (initially no fading is set). The function uses some of the other functions to change the layer settings.

var curImg = 0; // index of the array entry
var lastImg = 0;
function changeSlide ( change ) {
if (!DHTML) return;
curImg += change;
if ( curImg < 0 ) curImg = slides.length-1;
if ( curImg >= slides.length ) curImg = 0;
if ( fadeOn ) {
firstFade = true;
prepLyr(slides[lastImg], true );
fadeLayer(slides[lastImg], 10, 50);
} else {
visib(slides[lastImg], false);
visib(slides[curImg], true);
lastImg = curImg;

This is the function that I use to change the current slide displayed. If no fade is set then it only hides the previous image and shows the next one. Otherwise, it sets the firstFade variable to true, which is required to determine the next fade to be invoked. Then the layer clipping is set to no-clipping by the prepLayer function (the true parameter), and the fadeLayer function executed sets the global variables which are later used by the realFade function.

var clipTop, clipWidth, clipBottom, lyrheight;
var time,amount,theTime,middle;
var slideSize = new Array()

function prepLyr(lyr, vis) {
if (!DHTML) return;
x = new getObj( lyr );
if (document.layers) {
if ( !slideSize[lyr] ) {
lyrheight = x.style.clip.bottom;
clipWidth = x.style.clip.right;
slideSize[lyr] = lyrheight + 'x' + clipWidth;
} else {
lyrheight = parseInt(slideSize[lyr]);
clipWidth = slideSize[lyr].substr(
if ( vis ) {
clipTop = 0;
middle = Math.round(lyrheight/2);
clipBottom = lyrheight;
} else {
middle = Math.round(lyrheight/2);
clipBottom = middle;
clipTop = middle;
x.style.clip.top = clipTop;
x.style.clip.left = 0;
x.style.clip.right = clipWidth;
x.style.clip.bottom = clipBottom;
x.style.visibility = 'show';
} else
if (document.getElementById || document.all) {
lyrheight = x.obj.offsetHeight;
clipWidth = x.obj.offsetWidth;
if ( vis ) {
clipTop = 0;
middle = Math.round(lyrheight/2);
clipBottom = lyrheight;
} else {
middle = Math.round(lyrheight/2);
clipBottom = middle;
clipTop = middle;
x.style.clip =
'rect('+clipTop+' '+clipWidth+' '+ clipBottom +' 0)';
visib(lyr, true);

First up, we declare some global variables. The prepLyr function first tests the global variable DHTML, which determines whether the function should be executed or not. It then creates object x, which refers to the layer that is being manipulated.

This is where there is no way to write code that will be executed by all browsers. I use the fact that arrays in JavaScript can have string indices, not only numbers to determine whether this layer's size has been determined before.
blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials