PDA

View Full Version : Translucent Slide Show



dgathercole
01-30-2008, 02:06 AM
1) Script Title: Translucent Slide Show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/translucentslide.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.

Nile
01-30-2008, 02:14 AM
Can we please see your page?

dgathercole
01-30-2008, 02:17 AM
Hi.
What do you mean by - can you see my page?

Cheers

Nile
01-30-2008, 02:20 AM
Do you have a website that this is on?
Or is it just on your computer. :)

dgathercole
01-30-2008, 02:27 AM
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

Nile
01-30-2008, 02:35 AM
Try this:

<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>

dgathercole
01-30-2008, 02:50 AM
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.

Nile
01-30-2008, 02:53 AM
lol, your welcome what I did was I added:
<center> tag to it. :)

dgathercole
01-30-2008, 03:50 AM
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.

Nile
01-30-2008, 04:03 AM
For that I think you would want to post in the feedback : http://www.dynamicdrive.com/forums/forumdisplay.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

dgathercole
01-30-2008, 09:14 AM
Thx again.
Speak soon.
Best regards