?
Solved

Problems with conveyor belt slide show script

Posted on 2009-02-23
9
Medium Priority
?
704 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:JackoPinto
  • 5
  • 4
9 Comments
 

Author Comment

by:JackoPinto
ID: 23714775
Please help! I need to solve this!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23719128
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23719149
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1500 total points
ID: 23719154
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
 

Author Comment

by:JackoPinto
ID: 23722096
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23722469
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
 

Author Comment

by:JackoPinto
ID: 23722583
Thanks. Any suggestions on a newer-better slider?
0
 

Author Comment

by:JackoPinto
ID: 23813153
Suggestions on a better-newer slider?  Thanks for commenting.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 23814778
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question