/* Transition Effects Script by WBS (c) 2004 Title: Transition Effects for Internet Explorer 5.5 File: WbsTrans.js Version: 1.0 Author: WBS Date created: November 12, 2004 Last update: December 20, 2004 */ /* ------------------------------------------------------------------- public void createTrans(Image img, int delay, bool randomImages, bool randomFilter, int timeShift) img - An image element defined using <img> tag that will participate in transitions. imgArray - An array containing images. delay - Time in miliseconds between transitions. randomImages - Determines if the next image will be selected randomly. There is a special mechanism preventing from selecting the same image two time in a row. randomFilter - Determines if the filter will be selected randowmly. timeShift - Initial delay in milisecond to launch transitions. ------------------------------------------------------------------- */ function createTrans(img, imgArray, delay, randomImages, randomFilter, timeShift) { // Initialize a global variable 'errors' to keep any error messages that may occur. if (typeof(window['errors'])=='undefined') window['errors'] = ''; // A local variable to keep error messages. var errors = window['errors']; // If there are any error messages the createTrans() function terminates. if (errors!='') return; // Test if the imgArray array has been initialized. if (imgArray.length<1) errors += '- Transition effects require at least one image. ' + 'Please initialize the "' + imgArray.name + '" array.\n'; // Test if the 'transFilters' array has been defined and initialized. if (typeof(window['transFilters'])=='undefined') errors += '- Please define the "transFilters" array.\n'; else { if (transFilters.length<1) errors += '- Transition effects require at least one filter. ' + 'Please initialize the "transFilters" array.\n'; } if (errors!='') { // If any errors occured show them to users. alert('Transition effects cannot be created.\n'+errors); window['errors'] = errors; } else { // If there are no errors create a global variable that keeps an object of the Trans class. // The name of the variable is the same as the image element. var name = img.id; window[name] = new Trans(img, imgArray, randomImages, randomFilter); // Launch transition taking into account the initial delay. if (timeShift==0) { setInterval('doTrans(window["'+name+'"])', delay); } else { setTimeout('setInterval(\'doTrans(window["'+name+'"])\', '+delay+')', timeShift); } } } /* ------------------------------------------------------------------- private class Trans constructor: Trans(Image img, Array imgArray, bool randomImages, bool randomFilter ) img - An image element defined using <img> tag that will participate in transitions. randomImages - Determines if the next image will be selected randomly. There is a special mechanism preventing from selecting the same image two time in a row. randomFilter - Determines if the filter will be selected randowmly. ------------------------------------------------------------------- */ function Trans(img, imgArray, randomImages, randomFilter ) { this.imgArray = imgArray; this.randomImages = randomImages; // Determine if the filters are supported. this.isIE55 = qualifyBrowser(5.5); // Determine which image to show. if ( this.randomImages ) { this.currImage = getRandom(imgArray.length)-1; } else { this.currImage = 0; } // Load image file to the <img> tag. this.img = img; this.img.src = this.imgArray[this.currImage]; // Determine the next image. var nextImage = getNext( this.currImage, this.randomImages, this.imgArray.length, true ); // Preload the next image. this.objImg = new Image(); this.objImg.src = this.imgArray[nextImage]; // Assign next image as the current image. this.currImage = nextImage; // Test if the browser is Internet Explorer 5.5 or up. if ( this.isIE55 ) { // Save the randomFilter flag. this.randomFilter = randomFilter; // Assign filters to the "img" element. var filter = ''; for(i=0; i<transFilters.length; i++) { filter += transFilters[i]+' '; } this.img.style.filter = filter; this.numFilter = transFilters.length; // Initialize filter. if ( this.randomFilter ) this.currFilter = getRandom(this.numFilter)-1; else this.currFilter = 0; } } /* ------------------------------------------------------------------- private void doTrans(Trans trans) The doTrans() method is called each time a transition needs to be done. ------------------------------------------------------------------- */ function doTrans(trans) { if ( trans.isIE55 ) { // Determine the filter. trans.currFilter = getNext( trans.currFilter, trans.randomFilter, trans.numFilter, false ) // Apply filter and change image. trans.img.filters[trans.currFilter].apply(); trans.img.src = trans.objImg.src; trans.img.filters[trans.currFilter].play(); } else { // Just assign next image if the browser does not support transitions. trans.img.src = trans.objImg.src; } // Determine the next image. trans.currImage = getNext( trans.currImage, trans.randomImages, trans.imgArray.length, true ); // Preload the next image. trans.objImg = new Image(); trans.objImg.src = trans.imgArray[trans.currImage]; } /* ------------------------------------------------------------------- private int getRandom(int max) Utility function. Returns a random number between 1 and "max" included. ------------------------------------------------------------------- */ function getRandom(max) { var num = Math.round( Math.random()*(max-1) )+1; return num; } /* ------------------------------------------------------------------- private int getNext(int currValue, bool isRandom, int max, bool isDifferent) Utility function. Returns another number between 0 and "max" excluded. ------------------------------------------------------------------- */ function getNext(currValue, isRandom, max, isDifferent) { var nextValue = currValue; if ( isRandom ) { if (isDifferent) { var tmp = getRandom(max)-1; if (tmp == currValue) nextValue++; else nextValue = tmp; } else { nextValue = getRandom(max)-1; } } else { nextValue++; } if ( nextValue == max ) nextValue=0; return nextValue; } /* ------------------------------------------------------------------- The next two methods are taken form "JavaScript Bible" by Danny Goodman. They determine what version of IE is being used. ------------------------------------------------------------------- */ function getIEVersion(ua) { var IEOffset = ua.indexOf('MSIE '); return parseFloat( ua.substring(IEOffset + 5, ua.indexOf(';', IEOffset)) ); } function qualifyBrowser(qualifiedVersion) { var ua = navigator.userAgent; var ret = false; if (navigator.appName == 'Microsoft Internet Explorer') { if (parseInt(getIEVersion(ua)) >= qualifiedVersion ) { if (ua.indexOf('Windows') != -1) { ret = true; } } } return ret; }
Test.htm:
<html> <head> <title>Transitions</title> <script language="javascript" type="text/javascript"> // (1) Declare the transImages array containing images for transitions (at least one). var transImages = new Array('001.jpg','002.jpg','003.jpg','004.jpg','005.jpg','006.jpg','007.jpg'); // (2) Declare the transFilters array containing filters (at least one). var transFilters = new Array('progid:DXImageTransform.Microsoft.Blinds(Bands=4,direction=up)', 'progid:DXImageTransform.Microsoft.Checkerboard(Direction=right,SquaresX=8,SquaresY=6)', 'progid:DXImageTransform.Microsoft.Fade(Overlap=1.00)', 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)', 'progid:DXImageTransform.Microsoft.Inset()', 'progid:DXImageTransform.Microsoft.Iris(irisstyle=STAR,motion=out)', 'progid:DXImageTransform.Microsoft.Iris(irisstyle=PLUS,motion=out)', 'progid:DXImageTransform.Microsoft.Iris(irisstyle=CROSS,motion=out)', 'progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=CLOCK)', 'progid:DXImageTransform.Microsoft.RandomBars()', 'progid:DXImageTransform.Microsoft.RandomDissolve()', 'progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=1)', 'progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=5)', 'progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1)', 'progid:DXImageTransform.Microsoft.Slide(slidestyle=SWAP,Bands=1)', 'progid:DXImageTransform.Microsoft.Spiral(GridSizeX=8,GridSizeY=8)', 'progid:DXImageTransform.Microsoft.Stretch(stretchstyle=PUSH)', 'progid:DXImageTransform.Microsoft.Strips(motion=leftdown)', 'progid:DXImageTransform.Microsoft.Wheel(spokes=6)', 'progid:DXImageTransform.Microsoft.Zigzag(GridSizeX=8,GridSizeY=8)'); </script> <!-- (3) Attach the WbsTrans.js file --> <script language="javascript" type="text/javascript" src="WbsTrans.js"></script> </head> <!-- (4) Invoke createTrans() function in any place, for example in the onLoad() event handler of the <body> tag --> <body onload="createTrans(imgFirst, transImages, 2000, false, true, 0); createTrans(imgSecond, transImages, 2000, true, false, 1000);"> <!-- (5) Place the <img> tags on the page. These images are referenced by createTrans(). --> <img id="imgFirst" alt="first image"> <img id="imgSecond" alt="second image"> </body> </html>
Sample images: