Conveyer Belt Slideshow question

[Shiana]

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

I was able to get all my images loaded, but there is a big gap in between my images. I see in the script where it says to change the gap, but I don't know what to put in there. : )

Thanks for your help.

[Freeman]

If you post a part of your script that would be helpful.

[jr_yeo]

or a link to ur problematic page

that would be most helpful

[Shiana]

Sorry, thought posting the link for the script was enough. Here's part of it.

<script type=text/javascript>

/***********************************************
* Conveyor belt 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
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="200px"
//Specify the slider's height
var sliderheight="250px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2
//configure background color:
slidebgcolor="#000000"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="Ulitaar.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="Sriab.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="Vaelos.jpg" border=1></a>'

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

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=-5


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

[ddadmin]

The two variables that control the gaps are:

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

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5

You can change them to, for example:

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

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0

[Shiana]

Ok, thanks for replying.

I changed it to zero and there is still a big black gap between each image.

I have about 20 images in my real slideshow. Each image has a big gap between them. But when the slideshow starts over, there is no gap between the ending image and the beginning image-but all the others have the gaps.

[jscheuer1]

We really would need a link to your page to know for sure what the problem is:

Please post a link to the page on your site that contains the problematic script so we can check it out.

However, things I would check are, here:

leftrightslide[0]='<a href="http://"><img src="Ulitaar.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="Sriab.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="Vaelos.jpg" border=1></a>'

Make sure the borders are set to 0 in your version of the above and that there are no spaces or other characters or elements in the mix in the array there. Also make sure there are no margins, padding or borders applied to the images via style anywhere on or linked to your page.

I don't want to repeat what ddadmin posted except to say that he is right about that part, make sure those settings are as he recommends. Using a negative value (-5) for the gap as you have it in your example code could have unexpected results.

Since you say that there is no gap between the beginning and end, this probably is not a concern but, make sure there are no physical borders on the images themselves when viewed in a image viewer or image program.