Slide Script Question for Programmers

[Liasson]

1) Script Title: Translucent slideshow Script

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

3) Describe problem: None, Just asking a question.


Hello,

This is my first post and I hope I'm in the right area.

Subject: Slide codes.

I came into Dynamicdrive to find a code for slides. Luckily, I found 2 good ones: the fade and the mouseover pause. I snagged them both but now I'm in a pickle about which one to use. I prefer the fade but I NEED the mouseover. For you programmers, is it possible to grab the mouseover script and plop it into the fade one?

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[jscheuer1]

This one fades and pauses:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

[Liasson]

Thank you! Done.

[Liasson]

Thank you, John. It doesn't have the same "slide" effect though. See how the preferred one slides from the left to right?

[jscheuer1]

I really don't like the script that you seem to like. To my eye, only one of the two images should be translucent during sliding. The way it is now looks jerky or popping, not smooth. It looks OK in other browsers, ones that don't fade using the type of opacity this script uses (like Opera). Anyways, here is a copy of that script modified to pause onmouseover:

<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- &#169; 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 pausevar=0, 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('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden" onmouseover="pausevar=1;" onmouseout="pausevar=0;"><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>')
}

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(pausevar){
setTimeout("rotateslide()", 100);
return;
}
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>

[jscheuer1]

I played around with this one a bit more and, although my previous post in this thread adds only code to do a pause onmouseover, this version is much more to my liking:

<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 pausevar=0, 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('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden" onmouseover="pausevar=1;" onmouseout="pausevar=0;"><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;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;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>')
}

var curpos=trans_width*(-1), trans_op=80/(parseInt(trans_width)/degree);
//alert(trans_op)
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"
if (crossobj.filters)
crossobj.filters.alpha.opacity+=trans_op;
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=(crossobj.style.MozOpacity*100+trans_op)/101;
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=(crossobj.style.opacity*100+trans_op)/101;
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=0.99
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=0.99
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? ie4[nextcanvas] : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if(pausevar){
setTimeout("rotateslide()", 100);
return;
}
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? ie4[curcanvas] : document.getElementById(curcanvas)
crossobj.style.zIndex++
var setobj=ie4? ie4[curcanvas=="canvas0"? "canvas1" : "canvas0"] : document.getElementById(curcanvas=="canvas0"? "canvas1" : "canvas0")
setobj.style.zIndex=0;
if (crossobj.filters)
crossobj.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=0.2
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=0.2
dropslide=setInterval("moveslide()",50);
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? ie4[what] : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? ie4[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>