Conveyor Belt slideshow

[Italianlodging]

Hello dynamicdrive!


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

I really enjoy this script and I am really looking forward to have it on my site. I have a question though. I need to add some changes if that is allowed. I would like to have it working vertically on my page as it would serve as a sort of second menu. I have tried to adjust the script to perform the scrolling vertically and it works partially.
In adjusting the script I am getting stuck with a gap that shows between the cycles.

The slide works fine as long the script is placed on the left side of the page. I see the gap also if I place the original script in the center of the page for example.
The pictures start scrolling ok but then when it gets to the last picture of the array it shows a blank spot instead of re-inserting the first picture. It is not smooth anymore.

What I would like to accomplish would also be inserting two buttons and control the scrolling in an up or down way.

How can I fix that?

Thank you in advance.

[speedracer]

post what you have so far. i'm assuming that you're using "top" instead of "left"

What I would like to accomplish would also be inserting two buttons and control the scrolling in an up or down way.

How can I fix that?

why would you use this script for this purpose for the menu?

[Italianlodging]

Ciao speedracer, thanks for your reply. I have cut off a little of code so it is easier to read (for me for sure !)
This is what I have that does work, it does scroll up but it is not smooth it leaves up blank spaces.

This is what I want to do with the menu. I want to put it in a page that describes several apartments. I would like the user to scroll these apartments and then click the one he wants to visit. I would like to put two extra buttons one on top of the first picture and one below the last one. With the onclick event I would like the images to scroll up and down and also be linked to a master page. It would be nice to bind the move function to the onclick events on the button . I am here maybe asking to change a lot the original script so this is up to you guys. If you think maybe it is an useful one for others...

thank you in advance.

<script type="text/javascript">

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

//Specify the slider's images
var topslide=new Array()
var finalslide=''
topslide[0]='<a href="http://"><img src= "Images/uno.jpg" border=1></a>'
topslide[1]='<a href="http://"><img src= "Images/due.jpg" border=1></a>'
topslide[2]='<a href="http://"><img src= "Images/tre.jpg" border=1></a>'
topslide[3]='<a href="http://"><img src= "Images/quattro.jpg" border=1></a>'
topslide[4]='<a href="http://"><img src= "Images/cinque.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
topslide=topslide.join(imagegap)+'</br>'

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+topslide+'</span>')
var actualwidth=''
var cross_slide

function fillup()
{
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=topslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
lefttime=setInterval("slidetop()",30)
}
window.onload=fillup

function slidetop(){
if (parseInt(cross_slide.style.top)>(actualwidth*(-1)+8))
cross_slide.style.top=parseInt(cross_slide.style.top)-copyspeed+"px"
else
cross_slide.style.top=parseInt(cross_slide2.style.top)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.top)>(actualwidth*(-1)+8))
cross_slide2.style.top=parseInt(cross_slide2.style.top)-copyspeed+"px"
else
cross_slide2.style.top=parseInt(cross_slide.style.top)+actualwidth+slideshowgap+"px"
}


with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

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>')

document.write('</td></table>')
}

</script>

[speedracer]

any "offsetWidth"
should be replaced with "offsetHeight"

that should make the script go up w/o gaps.

about the buttons...it would be too time consuming for me to even attempt to try it. i don't see this script written for the scroll to go downward.

[kapara]

hi

i need it vertically, too

i replaced offsetwidth with offsetheight and it stopped moving

any suggestion ?

thanks

[ddadmin]

Hmmm getting this script to work vertically isn't as easy as simply changing a few values. Unfortunately due to time constraints the best I can do is take this into consideration for future script developments. If someone else has the time/ knowledge, of course, please give it a stab.

[kapara]

i correct myself: it scrolls vertically fine, but still has this gap at the end.

any idea how to eliminate the gap?

thanks again

lenny

[winquest]

pls see the following changes from left-right to vertical:

<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="50px"
//Specify the slider's height
var sliderheight="200px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var topslide=new Array()
var finalslide=''
topslide[0]='<a href="http://"><img src="1.jpg" border=1></a>'
topslide[1]='<a href="http://"><img src="2.jpg" border=1></a>'
topslide[2]='<a href="http://"><img src="3.jpg" border=1></a>'
topslide[3]='<a href="http://"><img src="4.jpg" border=1></a>'
topslide[4]='<a href="http://"><img src="5.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
topslide=''+topslide.join(imagegap)+''
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-10px;top:-9000px">'+topslide+'</span>')
var actualheight=''
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=topslide
actualheight=document.all? cross_slide.offsetHeight : document.getElementById("temp").offsetHeight
cross_slide2.style.top=actualheight+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(topslide)
ns_slide.document.close()
actualheight=ns_slide.document.width
ns_slide2.top=actualheight+slideshowgap
ns_slide2.document.write(topslide)
ns_slide2.document.close()
}
toptime=setInterval("slidetop()",30)
}
window.onload=fillup

function slidetop(){
if (iedom){
if (parseInt(cross_slide.style.top)>(actualheight*(-1)+8))
cross_slide.style.top=parseInt(cross_slide.style.top)-copyspeed+"px"
else
cross_slide.style.top=parseInt(cross_slide2.style.top)+actualheight+slideshowgap+"px"

if (parseInt(cross_slide2.style.top)>(actualheight*(-1)+8))
cross_slide2.style.top=parseInt(cross_slide2.style.top)-copyspeed+"px"
else
cross_slide2.style.top=parseInt(cross_slide.style.top)+actualheight+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.top>(actualheight*(-1)+8))
ns_slide.top-=copyspeed
else
ns_slide.top=ns_slide2.top+actualheight+slideshowgap

if (ns_slide2.top>(actualheight*(-1)+8))
ns_slide2.top-=copyspeed
else
ns_slide2.top=ns_slide.top+actualheight+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;top:0px;left:0px"></div>')
write('<div id="test3" style="position:absolute;top:-1000px;left: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" top=0 left=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" top=0 left=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

[winquest]

the trick I think is to adjust the slider width and height according to the image size. The width should be the width of the image, whilst the height should be ideally twice or at least 175% of the total height of all the combined images. the figures might not be correct, but I think the rule of thumb is to allow enough time for the server to perform a documentwrite.

[Sabre]

pls see the following changes from left-right to vertical:

Awesome! This is exactly what I've been searching for.

Thanks very much winquest!