PDA

View Full Version : Conveyor Belt slideshow Gap Problem



lesane
11-09-2005, 02:16 PM
Conveyor Belt slideshow
Scripturl: http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

I am using above script and it's working fine but when you enable a gap then the gap between the last image and the next first image is not visible!!!

So, when the script reached the image 5.jpg and goes further to the beginning (1.jpg) then there is no gap!!!

This is the code that i am using:


<script type="text/javascript">
var sliderwidth="450px"
var sliderheight="100px"
var slidespeed=1
slidebgcolor="#2f6fab"

//Specify the slider's images style="border:1px solid blue;"
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="1.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="2.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="3.jpg" border=0></a>'
leftrightslide[3]='<a href="http://"><img src="4.jpg" border=0></a>'
leftrightslide[4]='<a href="http://"><img src="5.jpg" border=0></a>'

//Specify gap between each image (use HTML):
var imagegap="<img src=clear.gif width=1px height=1px>"
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>


Thanks for any help

ddadmin
11-09-2005, 08:44 PM
Well the gap you're specifying is only 1px wide, so it probably won't be detectable anyway. Try specifying a larger gap:



//Specify gap between each image (use HTML):
var imagegap="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"

lesane
11-13-2005, 02:45 PM
The gap is working fine and it does show the gap between the images but when the slide reach the last image and goes further to the beginning(the 1st image) then there is no gap! So it does show the clear.gif but not on the end.

Thanks for your reply.

lesane
11-13-2005, 02:50 PM
Check the screenshot:

http://www.mgtrading.nl/test.jpg

jscheuer1
11-13-2005, 05:15 PM
Go back to the configuration of the script again, look closely at this part:


//Specify gap between each image (use HTML):
var imagegap="<img src=clear.gif width=1px height=1px>"
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0
////NO NEED TO EDIT BELOW THIS LINE////////////

Unless the author of the script got it wrong, it is doing just what you told it to do. Try changing to:


//Specify gap between each image (use HTML):
var imagegap="<img src=clear.gif width=1px height=1px>"
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=1
////NO NEED TO EDIT BELOW THIS LINE////////////

lesane
11-14-2005, 11:05 PM
That did it! Thanks alot John.