Problems with conveyor belt slide show script

Hi,

I'm using the conveyor-belt slide show script attached bellow. However, I cannot get it to display more than the first image!  It should call 3 images as it moves along, but its repeating the first one over and over again! What am I doing wrong? Please help this is urgent!!. Thanks!

You can view what's happening at: http://www.libreriafrancesa.net
<td width="480" align="center" valign="middle">
      <script type="text/javascript">
 
/***********************************************
* Conveyor belt 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
***********************************************/
 
 
//Specify the slider's width (in pixels)
var sliderwidth="450px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#FFFFFF"
 
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="/images/Fiscal5.gif" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="/images/Elfico5.gif" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="/images/123Frac5.gif" border=0></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>
       </td>

Open in new window

JackoPintoAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Add a height to the images:



leftrightslide[0]='<a href="http://"><img src="http://www.abilene.es/wp-content/uploads/2008/12/la-politica-fiscal5.jpg" border=0 height="100"></a>'
leftrightslide[1]='<a href="http://"><img src="http://farm3.static.flickr.com/2123/buddyicons/22727975%40N02.jpg" border=0 height="100"></a>'
leftrightslide[2]='<a href="http://"><img src="http://upload.wikimedia.org/math/7/f/5/7f5c5e0d3f3efa435ee80ceb571c07e6.png" border=0 height="100"></a>'

Open in new window

0
 
JackoPintoAuthor Commented:
Please help! I need to solve this!
0
 
Michel PlungjanIT ExpertCommented:
your script works in

IE7
FF3
OPERA9
SAFARI
MOZILLA
on windows.

Not sure where you are running

My guess is that you have an image problem.
I tested with
leftrightslide[0]='<a href="http://"><img src="http://tbn3.google.com/images?q=tbn:A60bUzgfvdacNM:http://www.abilene.es/wp-content/uploads/2008/12/la-politica-fiscal5.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="http://tbn1.google.com/images?q=tbn:XOHhV77Z1djXtM:http://farm3.static.flickr.com/2123/buddyicons/22727975%40N02.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="http://tbn3.google.com/images?q=tbn:oRIjUk8xbRehZM:http://upload.wikimedia.org/math/7/f/5/7f5c5e0d3f3efa435ee80ceb571c07e6.png" border=0></a>'

Open in new window

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
Michel PlungjanIT ExpertCommented:
Aha,
I changed to



leftrightslide[0]='<a href="http://"><img src="http://www.abilene.es/wp-content/uploads/2008/12/la-politica-fiscal5.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="http://farm3.static.flickr.com/2123/buddyicons/22727975%40N02.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="http://upload.wikimedia.org/math/7/f/5/7f5c5e0d3f3efa435ee80ceb571c07e6.png" border=0></a>'
 
 
and saw that if the image is too large, it pushes the others down

Open in new window

0
 
JackoPintoAuthor Commented:
Thanks for your comments.  

I added a height to the images and it still doesn't work.  I also reduced the size of the images to make them smaller than the size of the slider.

The slider is set to 450px width and 300px height, the images are all the same size at 400 W,  267 H, but it still doesn't work on any browser on both PC and Mac!  Bellow is what I have so far, please help!
 <td width="480px" height="300px" align="center" valign="middle">
      <script type="text/javascript">
 
/***********************************************
* Conveyor belt 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
***********************************************/
 
 
//Specify the slider's width (in pixels)
var sliderwidth="450px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#FFFFFF"
 
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="mapa.php"><img src="images/marquesina/Fiscal6.gif" border=0 height="267"></a>'
leftrightslide[1]='<a href="http://20mars.francophonie.org/2009"><img src="images/marquesina/Francofonia6.gif" border=0 height="267"></a>'
 
//Specify gap between each image (use HTML):
var imagegap=1
 
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=1
 
 
////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>
       </td>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
It works if you make the slider 3 times as big or the images 3 times as small.

I suggest you find a smarter and newer slider since there are millions out there.
0
 
JackoPintoAuthor Commented:
Thanks. Any suggestions on a newer-better slider?
0
 
JackoPintoAuthor Commented:
Suggestions on a better-newer slider?  Thanks for commenting.
0
 
Michel PlungjanIT ExpertCommented:
google is your friend. I do not use such scripts so I have no recommendation

http://www.google.com/q=conveyor+belt+slider+DHTML
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.