Hi Guys,
I found this very useful banner rotator online and thought the right thing to do would be to share it.
Useful things about this banner rotator:
- Your banners do not all have to be the same size as it allows you to specify a background and you can set the background to be the size of your largest banner.
- You can have as many banners as you like and you can specify where they link to.
- You can set the cycles of your rotator for as many times as you want or you can just set it continuous.
- You can set the rotator to randomize your banners or have them display in order.
- You can also set the time before the next banner must display.
- You can set it to pre-load all your banners or not.
**Hope someone would find this useful, you can display it anywhere on your site or even within a language variable.
Quote:
<script type="text/javascript">
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['http://www.yoursite.co.uk/skin1/images/Banners/custom.jpg', 'http://www.linkhere.com', '_new']
ultimateshow[1]=['image1.gif', 'http://www.linkhere.com', '_new']
ultimateshow[2]=['image2.gif', 'http://www.linkhere.com', '_new']
ultimateshow[3]=['image3.gif', 'http://www.linkhere.com', '_new']
ultimateshow[4]=['image4.gif', 'http://www.linkhere.com', '_new']
ultimateshow[5]=['image5.gif', 'http://www.linkhere.com', '_new']
ultimateshow[6]=['image6.gif', 'http://www.linkhere.com', '_new']
ultimateshow[7]=['image7.gif', 'http://www.linkhere.com', '_new']
ultimateshow[8]=['image8.gif', 'http://www.linkhere.com', '_new']
ultimateshow[9]=['image9.gif', 'http://www.linkhere.com', '_new']
ultimateshow[10]=['image10.gif', 'http://www.linkhere.com', '_new']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="700px" //set to width of LARGEST image in your slideshow
var slideheight="96px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='black'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.lengt h)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+' ; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
|