Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Conveyor Belt slideshow

  1. #1
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conveyor Belt slideshow

    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.

  2. #2
    Join Date
    Jan 2005
    Location
    Seattle
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

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

    Quote Originally Posted by Italianlodging
    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?
    Last edited by speedracer; 02-13-2005 at 10:01 AM.

  3. #3
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Here is the code

    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>

  4. #4
    Join Date
    Jan 2005
    Location
    Seattle
    Posts
    53
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.

  5. #5
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default no go

    hi

    i need it vertically, too

    i replaced offsetwidth with offsetheight and it stopped moving

    any suggestion ?

    thanks

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  7. #7
    Join Date
    Feb 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default i correct ...

    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

  8. #8
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by winquest
    pls see the following changes from left-right to vertical:
    Awesome! This is exactly what I've been searching for.

    Thanks very much winquest!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •