Simple slide show / scroller

[akulion]

An excellent snippet from Dynamic Drive which works really well with TP as a side block

Demo: http://goofy-goobers.com/forum (look on the right)

code to add to a SCRIPT block:

Code Select Expand


<script language="JavaScript1.2">

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#0A1C31'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='<center>Your content goes here 1</center>'
scrollercontent[1]='<center>Your content goes here 2</center>'
scrollercontent[2]='<center>Your content goes here 3</center>'


////NO need to edit beyond here/////////////

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>


where it says scrollercontent[0]='Your content goes here 1' u can put any sort of html between the ' and ' and it will show up in the slideshow.
If u need to add more content just copy the line and increase the number in the square brackets

• 
  
  This part obiviously sets the height width color and delay of the slide show:
  var scroller_width='150px'
  var scroller_height='115px'
  var bgcolor='#0A1C31'
  var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
  
  Please note the color u select - make it either a LITTLE darker or lighter than the actual color of ur block or for some reason it becomes way too translucent
  
  thats all
  credits: dynamicdrive.com
  
  aku

[RoarinRow]

Looks cool, but in IE7, it's not centered   

[bluedevil]

Looks cool, but in IE7, it's not centered  

Im having the same problem.

[akulion]

code changed above to fix IE

[bluedevil]

Its fixed now thanx! Aku.

One question tho'.... is this only for html??  no images? [img /img]?

[akulion]

no BB codes html is very simple really

for images u have a tag:

Code Select Expand


<img src="image address here" width=123" height ="123">


for links

Code Select Expand


<a href="address here">Link text here</a>


hope that helps

[bluedevil]

no BB codes html is very simple really

for images u have a tag:

Code Select Expand


<img src="image address here" width=123" height ="123">


for links

Code Select Expand


<a href="address here">Link text here</a>


hope that helps

Yep. It really helped but the images are a bit blurry. Maybe if i make a center block and change the size will cure it.  Any ideas?

See it in action center very top.  www.midwestavalancheclub.com

[akulion]

remove that this part: width=123" height ="123" from the image tag i gave u above, it can be removed, that way ur images will show undistorted in their actual dimensions

if images may be too big then u may want to move the block to another part.

[brianjw]

Thanks for this code

[bluedevil]

Thnx for the code Aku!!!  It works pretty good now.  I made it on a center block and changed the width and height also.

Now i need to upload more pics  :up: