SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I speed up the image rotation

    Hi, I'm trying to use a script from dynamicdrive.com (http://www.dynamicdrive.com/dynamici...ightslide2.htm) and I can't seem to find a way to speed up the rotation. By rotation I mean how fast the image flies across the screen (and not the pause between images wait time). Please help. I'm looking to quadruple the speed.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's using a timeout of 50 at the moment.

    Code Javscript:
    setTimeout("move1(tlayer)",50)

    You'll want to drop that to about 12 milliseconds.
    You may want to create a new variable at the top, called animationDelay

    Code Javascript:
    var pausebetweenimages=3000
    var animationDelay=12 // used to be 50

    Then you can replace every occurance of 50 in the setTimeout functions with animationDelay

    Code Javscript:
    setTimeout("move1(tlayer)", animationDelay)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm, browsers have a minimum delay time of between 25 and 75 it seems. Obviously a delay of 0 is impossible and ultimately the actual minimum delay is dictated by the speed of the client computer's processor as well as whatever the browser has internally set as the minimum it is willing to do.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    To quote excessively from the Definitive Guide for Javascript, a delay of 0 isn't invoked right away but it run "as soon as possible", such as when it has finished running the event handlers for any pending events, and has finished updating the current state of the document.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are amazing, pmw57. Another question. Why is it that when I replace the 12 you have listed with a 1 it's just as fast? I'm trying to get it to speed scroll across pretty fast. Thanks again!

    Edit: I tried 0 and that's not fast enough either.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Because sometimes computers just can't be sped up any further.
    Another option is to increase the distance it moves at each step.

    The script currently uses 5 pixels, so you could easily double the movement by increasing the 5 to 10.

    Code Javascript:
    var pausebetweenimages=3000
    var animationDelay=25 // used to be 50
    var animationDistance=10 // used to be 5

    Then you could go through the code replacing every occurance of 5 with animationDistance

    Code Javscript:
    ...
    if (tlayer.left>0&&tlayer.left<=animationDistance){
    ...
    tlayer.left-=animationDistance
    ...

    And so on. After which you will be able to easily adjust the speed and distance of the animation, in order to fine-tune it to whatever you desire.

    Here is the code with the animationSpeed and animationDistance

    Code Javascript:
    /*
    Left-Right image slideshow Script-
    By Dynamic Drive ([url]www.dynamicdrive.com[/url])
    For full source code, terms of use, and 100's more scripts, visit [url]http://dynamicdrive.com[/url]
    */
     
    ///////configure the below four variables to change the style of the slider///////
    //set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
    var scrollerwidth='100px'
    var scrollerheight='106px'
    var scrollerbgcolor='white'
    //3000 miliseconds=3 seconds
    var pausebetweenimages=3000
    var animationDelay=25 // used to be 50
    var animationDistance=10 // used to be 5
     
     
    //configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
    var slideimages=new Array()
    slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
    slideimages[1]='<img src="PE01803A.gif">'
    slideimages[2]='<img src="TN00411A.gif">'
    slideimages[3]='<img src="PE02054A.gif">'
    slideimages[4]='<img src="cake.gif">'
    //extend this list
     
    ///////Do not edit pass this line///////////////////////
     
    var ie=document.all
    var dom=document.getElementById
     
    if (slideimages.length>1)
    i=2
    else
    i=0
     
    function move1(whichlayer){
    tlayer=eval(whichlayer)
    if (tlayer.left>0&&tlayer.left<=animationDistance){
    tlayer.left=0
    setTimeout("move1(tlayer)",pausebetweenimages)
    setTimeout("move2(document.main.document.second)",pausebetweenimages)
    return
    }
    if (tlayer.left>=tlayer.document.width*-1){
    tlayer.left-=animationDistance
    setTimeout("move1(tlayer)",animationDelay)
    }
    else{
    tlayer.left=parseInt(scrollerwidth)+animationDistance
    tlayer.document.write(slideimages[i])
    tlayer.document.close()
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }
     
    function move2(whichlayer){
    tlayer2=eval(whichlayer)
    if (tlayer2.left>0&&tlayer2.left<=animationDistance){
    tlayer2.left=0
    setTimeout("move2(tlayer2)",pausebetweenimages)
    setTimeout("move1(document.main.document.first)",pausebetweenimages)
    return
    }
    if (tlayer2.left>=tlayer2.document.width*-1){
    tlayer2.left-=animationDistance
    setTimeout("move2(tlayer2)",animationDelay)
    }
    else{
    tlayer2.left=parseInt(scrollerwidth)+animationDistance
    tlayer2.document.write(slideimages[i])
    tlayer2.document.close()
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }
     
    function move3(whichdiv){
    tdiv=eval(whichdiv)
    if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=animationDistance){
    tdiv.style.left=0+"px"
    setTimeout("move3(tdiv)",pausebetweenimages)
    setTimeout("move4(scrollerdiv2)",pausebetweenimages)
    return
    }
    if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
    tdiv.style.left=parseInt(tdiv.style.left)-animationDistance+"px"
    setTimeout("move3(tdiv)",animationDelay)
    }
    else{
    tdiv.style.left=scrollerwidth
    tdiv.innerHTML=slideimages[i]
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }
     
    function move4(whichdiv){
    tdiv2=eval(whichdiv)
    if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=animationDistance){
    tdiv2.style.left=0+"px"
    setTimeout("move4(tdiv2)",pausebetweenimages)
    setTimeout("move3(scrollerdiv1)",pausebetweenimages)
    return
    }
    if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
    tdiv2.style.left=parseInt(tdiv2.style.left)-animationDistance+"px"
    setTimeout("move4(scrollerdiv2)",animationDelay)
    }
    else{
    tdiv2.style.left=scrollerwidth
    tdiv2.innerHTML=slideimages[i]
    if (i==slideimages.length-1)
    i=0
    else
    i++
    }
    }
     
    function startscroll(){
    if (ie||dom){
    scrollerdiv1=ie? first2 : document.getElementById("first2")
    scrollerdiv2=ie? second2 : document.getElementById("second2")
    move3(scrollerdiv1)
    scrollerdiv2.style.left=scrollerwidth
    }
    else if (document.layers){
    document.main.visibility='show'
    move1(document.main.document.first)
    document.main.document.second.left=parseInt(scrollerwidth)+animationDistance
    document.main.document.second.visibility='show'
    }
    }
     
    window.onload=startscroll
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!!!

  8. #8
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mean to get greedy, but is there a way to reverse the direction of the switching? Instead of the image flowing from right to left, is there a way to make it go from the left to the right?


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
  •