How to create a DHTML Slideshow with fading effect

Compatibility

• This script does not work in version 3 or lower browsers
• The fading effect does not work in Opera 5, Konqueror and Omniweb, because these browser don't support clipping
• Version 3 or lower browsers should just see the photos side by side and down to the end of the page

I have seen many slideshow scripts almost all of which support version 3 browsers but require equal sized photos. My script does not require equal sized photos at all. In addition it also adds a fading effect( I can't quite remember is that called doors or only the horizontal version is).

Clipping is a very powerful CSS property. It tells the browser what area of the visual element should be displayed, as far as I know only the rect area( rectangle) is supported by now. You can produce amazing fade effects dynamically changing its value.

The script

The HTML

<h1>My DHTML slideshow gallery</h1>
<div align="center">
<a href="javascript:changeSlide(-1)">Previous</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:changeSlide(1)">Next</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:setFade(false)">No fade</a>&nbsp;&nbsp;&nbsp;
<a href="javascript:setFade(true)">Fade</a><br>
</div>
	<div id="slide0" class="slide"><img src="images/slide0.jpg" alt="slide0" width="100" height="50" border="0"></div>
	<div id="slide1" class="slide"><img src="images/slide1.jpg" alt="slide1" width="100" height="50" border="0"></div>
	<div id="slide2" class="slide"><img src="images/slide2.jpg" alt="slide2" width="50" height="100" border="0"></div>
	<div id="slide3" class="slide"><img src="images/slide3.jpg" alt="slide3" width="100" height="50" border="0"></div>
	<div id="slide4" class="slide"><img src="images/slide4.jpg" alt="slide4" width="50" height="100" border="0"></div>
	<div id="slide5" class="slide"><img src="images/slide5.jpg" alt="slide5" width="100" height="50" border="0"></div>
	<div id="slide6" class="slide"><img src="images/slide6.jpg" alt="slide6" width="50" height="100" border="0"></div>
	<div id="slide7" class="slide"><img src="images/slide7.jpg" alt="slide7" width="100" height="50" border="0"></div>

Simple but working. Of course you do not have to name your images slide0.jpg and so on.

The stylesheet

<style type="text/css">
.slide {
	position : absolute;
	visibility : hidden;
	top : 200px;
	left : 50px;
}

#slide0 {
	visibility : visible;
}
</style>

Maybe you are wondering why I didn't set the clipping in the stylesheet but left it to the JavaScript. The answer is simple: Netscape Navigator 4 can get only the height/width of the block( actually the clipping area),  when no clipping is set( apparently it doesn't get the height value properly, but I have never seen a difference more than 10 pixels).

The JavaScript

<script type="text/javascript">
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) {
	x = new getObj(objName);
	x.style.visibility = (flag) ? 'visible' : 'hidden';
}


slides = new Array( // The id's of the slides
	'slide0',
	'slide1',
	'slide2',
	'slide3',
	'slide4',
	'slide5',
	'slide6',
	'slide7');

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

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;
	else
		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;
}

var firstFade = true;
function nextFade() {
	firstFade = false;
	prepLyr(slides[curImg], false);
	fadeLayer(slides[curImg], -10, 50);
}

var clipTop = 0;
var clipWidth = 150;
var clipBottom = 0;
var lyrheight = 0;
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(slideSize[lyr].indexOf('x')+1);
		}
		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);
	}
}

function fadeLayer(layername, amt, tim) {
	if (!DHTML) return;
	thelayer = new getObj( layername );
	if (!thelayer) return;
	amount = amt;
	theTime = tim;
	realFade();
}

function stopFade() {
	if (time) clearTimeout(time);
}

function realFade() {
	clipTop += amount;
	clipBottom -= amount;
	if (clipTop < 0 || clipBottom > lyrheight || clipTop > middle) {
		if ( clipTop > middle ) thelayer.style.visibility = 'hidden';
		if ( firstFade ) nextFade();
		return;
	}
	if (document.getElementById || document.all) {
		clipstring = 'rect('+clipTop+' '+clipWidth+' '+clipBottom+' 0)'
		thelayer.style.clip = clipstring;
	}	else
	if (document.layers) {
		thelayer.style.clip.top = clipTop;
		thelayer.style.clip.bottom = clipBottom;
	}
	time = setTimeout('realFade()',theTime);
}

</script>

Explanation

The HTML

First the controls are set using anchors( I also thought of having a form with a checkbox for the fade effect but the slideshow was to be included in a layer and it was to be a problem with NN 4). I have never liked coding for NN 4 browsers but unfortunately I have to do so because their users cannot be simply discarded off your site. Not that some should but in such a case it is not a matter (for a browser market share stats (free) go to www.webreview.com/browsers/browser_faq.shtml).

<div id="slide0" class="slide">
<img src="images/slide0.jpg" alt="slide0" width="100"
height="50" border="0"></div>

This sets the first slide of your DHTML slideshow. The img should be wraped in a div because NN 4 considers only div's and span's ( I think) for layers, not counting proprietary tags. The case is that NN 4 can only set visibility/clipping of a layer. The class="slide" is for setting the position and visibility of all slides, and the id is to identify the needed slide to be viewed.

The stylesheet

.slide {
	position : absolute;
	visibility : hidden;
	top : 200px;
	left : 50px;
}

#slide0 {
	visibility : visible;
}

First the class definition for all the slides. It sets the position to absolute to get the impression that the next slides comes from below the previous (not to have the user scroll down the page to see the next slide). Visibility : hidden prevents the browser from visializing the slides on the screen, while still reserving the space needed. We set also the top and left coordinates of the slides (px being the pixel unit).

The following style rule is to make only the first slide visible to the user.

The script

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. Actually I took them from www.xs4all.nl/~ppk/js/ I consider them self explaining, but for all of you who never had a chance to get involved with DHTML:

• 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, and if all evaluate to false that means that 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 we inform the users that their browser won't show the slideshow properly.
• The getObj function is used to handle that browser incompatibilities in a way that won't get the hell out of you just to write a DHTML cross-browser code. What it does is to check what DOM is supported and according to the result create an object and stuff its obj and style properties with references to the style rules applied to the layer, and its HTML properties too.
• The visib function triggers the visibility of a layer and is used basicly to ease the programmer not having to call the getObj function by humself.

Only to note that in NN 4 if you want to get a reference to a sublayer you have to use document.layers['parentLayer'].document.layers['subLayer'] instead of the easier non-changing way of the other browsers.

slides = new Array( // The id's of the slides
	'slide0',
	'slide1',
	'slide2',
	'slide3',
	'slide4',
	'slide5',
	'slide6',
	'slide7');

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

First create an array of the id's of the slides, later used when switching from one image to another. The setFade() function is used to trigger fading effects on/off( initially no fading is set). The function uses some of the other functions to change the layers settings in a way that is sensible for the fade or no fade slideshow.

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;
	else
		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. I no fade is set it only hides the previous image and shows the next one, otherwise it sets the firstFade variable to true, which is required to determine wheter after the fade a next one should be invoked. Then the layers 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(slideSize[lyr].indexOf('x')+1);
		}
		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 declaration of the global variables. The prepLyr function first tests the global variable DHTML wheter to be executes or not. Then it creates object x which refers to the layer manipulated, when it comes to the hard part of it. This is where there is no way to write a code that will be executed on all browsers, and especially great problems with NN 4 (not wondering). 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. If not set the lyrheight to the clipping area's bottom (which should mean the image's height), and the clipWidth to the image width. Then create an array entry with that data, because if you don't do so NN 4 will get a constanlty reducing image size for your slides until they cannot be much longer visible. If the images has been shown before it justs reads the array entry to get these values. Then it is time to test the vis parameter which tells us whether the image should be faded in or faded out. When fading in we initially set the clippig area's top and bottom to be the middle of the image, otherwise the are the top and bottom coordinates respectively.

When all these calculations have been made we actually apply the settings to the layer, in NN 4 it is through the clip.top/right/bottom/left properties and set it's visibility to show( Netscape's proprietary value).

Then we have finished NN 4 code and we check for DOM 1 or IE 4 support. The task is easier here because no matter what clipping set we can always get the image height/width. Then we make the same test for fade in or fade out, and at the end apply the settings as a string to the clip property.

Actually I first made a version of the slideshow with the units specified( px), but I didn't like it at all because I couldn't get it to work in NN 4 and Opera 5. Then I found this layer scroll script, and I got the idea of the compatibility and decided to make a version in which the fading can be swiched off. The thing is that the browser assume the pixels as default measure units, and I can't really tell you whether you should specify them.

function fadeLayer(layername, amt, tim) {
	if (!DHTML) return;
	thelayer = new getObj( layername );
	if (!thelayer) return;
	amount = amt;
	theTime = tim;
	realFade();
}

function stopFade() {
	if (time) clearTimeout(time);
}

The fadeLayer function is used just to set the global variables to the parameters passed to it and then invoke the realFade function to do the hard work.

The only thing that the stopFade function does is that it checks the timer ID and if the timer is running it stops it.

function realFade() {
	clipTop += amount;
	clipBottom -= amount;
	if (clipTop < 0 || clipBottom > lyrheight || clipTop > middle) {
		if ( clipTop > middle ) thelayer.style.visibility = 'hidden';
		if ( firstFade ) nextFade();
		return;
	}
	if (document.getElementById || document.all) {
		clipstring = 'rect('+clipTop+' '+clipWidth+' '+clipBottom+' 0)'
		thelayer.style.clip = clipstring;
	}	else
	if (document.layers) {
		thelayer.style.clip.top = clipTop;
		thelayer.style.clip.bottom = clipBottom;
	}
	time = setTimeout('realFade()',theTime);
}

var firstFade = true;
function nextFade() {
	firstFade = false;
	prepLyr(slides[curImg], false);
	fadeLayer(slides[curImg], -10, 50);
}

The realFade function adds the amount to the clipTop and subtracts it from the clipBottom. Then we check whether the clipping is off the image, if it is we check whether it is fade out. When fade out we hide the slide, otherwise sometimes there are stripes that stay visible and distract the whole slideshow. If the firstFade variable is true we execute the nextFade function which fades in the next slide. In both case of fading we end the function, preventing the setTimeout invokation which would result in an infinite loop. The next thing to do is to actually apply the calculated clipping area to the layer, there are differences in the DOM 1 / IE 4 way and the NN 4 (described above in the prepLyr function explanation). Afterwards we set a timeout that executes the same function again.

The nextFade function then sets the fisrtFade variable to false, to prevent looping the fading in effect and invokes the prepLyr function with parameters the next slide and false to initialize the image to fade in( clipping top and bottom to the middle). The realFade function is then invoked, passing it the current slide, a change amount of -10 pixels, which means that the clipping area should get bigger, and a delay of 50 miliseconds to widen the area.