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

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;
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. 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(
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 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.

Next: The Slideshow Script (contd.) >>
 

More JavaScript Articles
More By Martin Tsachev

Comments On: Create Your Own DHTML Slideshow With a Fading Effect

>>> Be the FIRST to comment on this article!