An image slideshow enhanced with random transitional effects

Home

DHTML & DOM

Creating a flashy image slideshow with IE Transitions

Here

An image slideshow enhanced with random transitional effects

It's time to get real now. Lets create an image slideshow that incorporates IE transitions into the mix. Apart from using just one transition, lets define an array of all IE transitions and have our slideshow randomly pick one from the list to utilize each time the page loads. We start out with such an array:

var global_transitions=[ //array of IE transition strings
"progid:DXImageTransform.Microsoft.Barn()",
"progid:DXImageTransform.Microsoft.Blinds()",
"progid:DXImageTransform.Microsoft.CheckerBoard()",
"progid:DXImageTransform.Microsoft.Fade()",
"progid:DXImageTransform.Microsoft.GradientWipe()",
"progid:DXImageTransform.Microsoft.Inset()",
"progid:DXImageTransform.Microsoft.Iris()",
"progid:DXImageTransform.Microsoft.Pixelate()",
"progid:DXImageTransform.Microsoft.RadialWipe()",
"progid:DXImageTransform.Microsoft.RandomBars()",
"progid:DXImageTransform.Microsoft.RandomDissolve()",
"progid:DXImageTransform.Microsoft.Slide()",
"progid:DXImageTransform.Microsoft.Spiral()",
"progid:DXImageTransform.Microsoft.Stretch()",
"progid:DXImageTransform.Microsoft.Strips()",
"progid:DXImageTransform.Microsoft.Wheel()",
"progid:DXImageTransform.Microsoft.Zigzag()"
]

Notice the absence of any attributes (ie: duration). We'll just let them fall back to their default values when undefined for simplicity here.

Next, it's time to create the main slideshow function that rotates a series of images by changing a wrapper DIV's .innerHTML property (so text can be shown as well). We check for support for IE filters/transitions, and if found, call apply() and play() just before each slide change. Here is the complete function:

function flashyslideshow(setting){
this.wrapperid=setting.wrapperid
this.imagearray=setting.imagearray
this.pause=setting.pause
this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()
this.currentimg=0
var preloadimages=[] //temp array to preload images
for (var i=0; i<this.imagearray.length; i++){
preloadimages[i]=new Image()
preloadimages[i].src=this.imagearray[i][0]
}
document.write('<div id="'+this.wrapperid+'" class="'+setting.wrapperclass+'">'+this.getSlideHTML(this.currentimg)+'</div>')
var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize
var wrapperdiv=document.getElementById(this.wrapperid)
if (wrapperdiv.filters){ //if the filters[] collection is defined on element (only in IE)
wrapperdiv.style.filter=global_transitions[effectindex] //define transition on element
this.pause+=setting.transduration //add transition time to pause
}
this.filtersupport=(wrapperdiv.filters && wrapperdiv.filters.length>0)? true : false //test if element supports transitions and has one defined
var slideshow=this
setInterval(function(){slideshow.rotate()}, this.pause)
}

flashyslideshow.prototype.getSlideHTML=function(index){
var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][1]+'">\n' : '' //hyperlink slide?
slideHTML+='<img src="'+this.imagearray[index][0]+'" />'
slideHTML+=(this.imagearray[index][1])? '</a><br />' : '<br />'
slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : '' //text description?
return slideHTML //return HTML for the slide at the specified index
}

flashyslideshow.prototype.rotate=function(){
var wrapperdiv=document.getElementById(this.wrapperid)
this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0
if (this.filtersupport)
wrapperdiv.filters[0].apply()
wrapperdiv.innerHTML=this.getSlideHTML(this.currentimg)
if (this.filtersupport)
wrapperdiv.filters[0].play(this.transduration)
}

For your convenience the script is also presented as an external js file: flashyslideshow.js.

To display an image slideshow, you'd call new flashyslideshow() and pass in a "setting" object containing the various desired settings for the slideshow. Here's an example:

var flashyshow=new flashyslideshow({ //create instance of slideshow
wrapperid: "myslideshow", //unique ID for this slideshow
wrapperclass: "flashclass", //desired CSS class for this slideshow
imagearray: [
["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
["spring.jpg", "", "", "Flowers spring back to life in Spring."],
["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
],
pause: 2000, //pause between slides (milliseconds)
transduration: 1000 //transition duration (milliseconds)
})

Demo:

The above slideshow works in all browsers, though in IE browsers that support transitions, a random transition will be applied to it when the page loads. Reload the page to see a different transition being used.

FYI the above demo also uses the following CSS to style it: