The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Fading Banner Image Swap with JavaScript

Apr16

Written by:
2009/04/16 10:32 AM RssIcon

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.

Tags:
Categories:
blog comments powered by Disqus

2 comment(s) so far...


Gravatar

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
Gravatar

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
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<February 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
2627281234
567891011
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize

Mon, 26 May 2014 13:39:24 -0500

Mon, 19 May 2014 13:10:38 -0500

Tue, 13 May 2014 05:00:08 -0500

Mon, 12 May 2014 05:00:43 -0500

Sun, 11 May 2014 05:00:26 -0500

Tue, 06 May 2014 05:00:02 -0500

Mon, 05 May 2014 05:00:34 -0500

Fri, 02 May 2014 05:00:52 -0500

Thu, 01 May 2014 05:00:00 -0500

Fri, 18 Apr 2014 05:00:38 -0500

Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print