SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Please help with this javascript slideshow bug

    Hi,

    In the slide show code below, there's a function to press "previous" and "next" links. The "next" one works fine, and if you keep pressing it, it cycles through all the slides.

    The "previous" one is a bit messed up, for some reason - it will go back a slide or two but then it will just go blank!

    Could you please help?
    Thank you!


    Code:
    <script type="text/javascript">
            start_slideshow(1, 3, 3000);
    
            var currentSlide = 1;
    
            function start_slideshow(start_frame, end_frame, delay) {
                id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
            }
    
            function switch_slides(frame, start_frame, end_frame, delay) {
                
                return (function() {
                                 
                    Effect.Fade('slide' + frame, { duration: 1.0 });
                    
                    if (frame == end_frame) {
                        frame = start_frame; 
                        currentSlide = frame;
                    } else {
                        frame = frame + 1; 
                        currentSlide = frame;
                    }
                    
                    Effect.Appear('slide' + frame, { duration: 1.0 });
                    
                    if (delay == 1000) {
                        delay = 3000; 
                    }
                    
                    id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
                })
            }
    
            function stop_slideshow() {
                clearTimeout(id);
            }
            
            function next_slide() {
                
                clearTimeout(id);
    
                Effect.Fade('slide' + currentSlide, { duration: 1.0 });
                
                if (currentSlide == 4) {
                    currentSlide = 0;
                }
                
                currentSlide = currentSlide + 1;
                Effect.Appear('slide' + currentSlide, { duration: 1.0 });
                id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
            }
            
            function previous_slide() {
                
                clearTimeout(id);
                
                if (currentSlide == 0) {
                    currentSlide = 1;
                } else {
                  Effect.Fade('slide' + currentSlide, { duration: 1.0 });
                  
                  currentSlide = currentSlide - 1;
                  Effect.Appear('slide' + currentSlide, { duration: 1.0 });
                  id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
                }
            }
            
        </script>
    The previous/next links are like this:



    Code:
    <a href="#" onclick="next_slide()">Next</a>
    <a href="#" onclick="previous_slide()">Previous</a>

  2. #2
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be better if you would use jQuery.... .. jquery is a free library that makes coding in javascript lot easier.... Uncle G(Google) can help u more...

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thetaus View Post
    It would be better if you would use jQuery.... .. jquery is a free library that makes coding in javascript lot easier.... Uncle G(Google) can help u more...
    Hi,

    Thanks for your reply - but as the site already uses Scriptaculous, there's no need to now add more libraries, when this can be done with the ones provided...


Tags for this Thread

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
  •