Fading Banner Image Swap with JavaScript
Apr
16
Written by:
2009/04/16 10:32 AM
I had to make an animated banner for a site. The obvious and easiest choice was to create an animated gif. Having done that, with a six image slide animation, I ended up with a 5mb image size. WOW. That would take ages to download, especially with our not so fast bandwidth here in South Africa. This will definitely drive people away from the site, never to return. Folks just don’t like waiting any more, they do not have the patience. It’s Go! Go! Go! So I had to come up with another plan.
I though of using a flash banner. This would work great. But I did not have the time to create a flash banner. Besides I am not a flash fundi. Yes i know it might be easy for some of you guys. What might take you five minutes to do will probably take me 25 minutes.
The other option was to use JavaScript to swap the images around. This seemed like the most viable option. I already had a simple banner slideshow. I might be able to use that. Problem was that the client wanted a fading image swap. Could this be done with JavaScript?
I browsed the internet and found The Ultimate fade-in slideshow. This is a robust, cross browser fade in slideshow script. It has the ability to display multiple slideshows on the same page, optional linking and link targeting for certain images, and the ability to randomize the display order of the images. You can also set the slideshow to pause when the mouse moves over it. Each instance of a fade-in slideshow on the page is completely independent of the other, meaning the aforementioned features can be customized for each slideshow. The cool fading effect works in IE, NS6+/ Firefox, and Safari 2, while all other browsers such as Opera 8 will simply skip the effect but continue to display the images.
This would be the perfect solution as I get my image swap slideshow, with fade-in and fade-out effects, as well as it being light weight because I can use compressed jpeg images. Win Win.
Here is the code:
Insert the following script into the head of your page. Change the path and images names, as well as increasing or decreasing the image array. This example has two image array, showing the ability to have two independent slideshows on one page.
< script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('')
else
document.write('< img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'">
')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='< a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='< img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+=''
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
< /script>
Then in the body of your page, place the following script where you want the image slideshow to appear. Notice that there are two calls to the slideshow script. This is to demonstrate that you can have multiple independent slideshows on one page. Adjust the width and height parameters as well as any others that you want, like pause, delay eyc
< script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
< /script>
That’s it. Enjoy and have fun.
blog comments powered by
2 comment(s) so far...
Re: Fading Banner Image Swap with JavaScript
i've been trying to adapt this feature to blogger but im unsuccessful, could you help me out?
By Daniel on
2009/04/26 09:24 PM
|
Re: Fading Banner Image Swap with JavaScript
HI Daniel,
I must admit that I haven't tried this with any Blogger template. In try just now, I too found that it did not work. This probably has something to do with the way blogger creates its HTML file and how it is rendered. I don't think it does well with third party scripts.
But here are two articles I came across that might help.
http://www.mydigitallife.info/2007/09/21/trick-to-add-adsense-adbrite-and-other-javascript-ad-code-directly-to-blogger-html-template/
http://dobeweb.com/2009/add-google-adsense-and-other-javascript-to-blogger-blogspot-templates.html
Try these methods out. Hopefully they will do the job for you.
By Robert Bravery on
2009/04/26 09:36 PM
|