Translucent Slide Show

1) Script Title: Translucent Slide Show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ucentslide.htm

3) Describe problem:Hi. Let me introduce myself. I'm David, and this is my first post on DD forum. I am relatively new to web designing and so far the scripts at DD are really good, but being a novice, a helping hand would be great!

I can easily load the translucent slide show, conveyor belt slideshow and image spotlight effect onto my site, but i would like to tweak the code in-abling these scripts to appear at the center of the web page rather than positioned at the left hand side.
Is this possible, and if so, how do i need to alter the code?
A big thx 4 any helpon this.
Cheers.

Can we please see your page?

Hi.
What do you mean by - can you see my page?

Cheers

Do you have a website that this is on?
Or is it just on your computer. :)

Hi.
Yes, i have a website, but the script has been deleted until i can discover a way of centering the code.
Basically i have been experimenting. Do you know of a solution to my query?
Cheers

Try this:

Code:

---

<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var trans_width='140px' //slideshow width
var trans_height='225px' //slideshow height
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=10 //animation speed. Greater is faster.

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["photo1.jpg", "http://www.cnn.com", "_new"]
slideshowcontent[1]=["photo2.jpg", "", ""]
slideshowcontent[2]=["photo3.jpg", "http://www.google.com", ""]


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

var bgcolor='white'

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

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

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

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=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=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.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(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

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

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

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

</script>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

---

DIAMOND JOB!
A very big thx 4 that, just uploaded the code, and it's bang in the center of the page. Great stuff, really kind of you!
Sorry to take advantage, i'd like to do the same with the conveyor belt slide show and Image spotlight effect (center images on web page), any advise would be much appreciated.
Once again, thx big.

lol, your welcome what I did was I added:
<center> tag to it. :)

Again, nice one.

Where did u add the <center> code?
I'll try the same with other scripts i'd like to use.

Big time thx again?

P.S. Can i contact you about any other advise with DD, i have an idea with tab content script.

For that I think you would want to post in the feedback : http://www.dynamicdrive.com/forums/f...splay.php?f=15

And I added it IN the script so I would just put it before the div, or before the javascript. hard to understand

Thx again.
Speak soon.
Best regards