SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie; Next/Previous in a Slideshow-script

    Hi!

    I don't know anything about JavaScript but I've found a simple Slideshow-script which I like. For example, if you click on 3, image number 3 will show up in the Slideshow. I also managed to Google some code that makes it swipe through the images automatically with a 5 second interval. The only thing I miss with the script is "Next"/"Previous" links to be able to go through the image sequence directly instead of having to wait 5 seconds. I would appreciate it a lot if someone could help me out with this!

    I'm attaching what I believe is the important part of the code:

    HTML Code:
        <a href="#" onclick="$('.slideshow').blinds_change(0); return false">1</a>
        <a href="#" onclick="$('.slideshow').blinds_change(1); return false">2</a>
        <a href="#" onclick="$('.slideshow').blinds_change(2); return false">3</a>
        <a href="#" onclick="$('.slideshow').blinds_change(3); return false">4</a>
        <a href="#" onclick="$('.slideshow').blinds_change(4); return false">5</a>
        <a href="#" onclick="$('.slideshow').blinds_change(5); return false">6</a>
        <a href="#" onclick="$('.slideshow').blinds_change(6); return false">7</a>
    
        <a href="#" onclick="???????????">Previous</a>
        <a href="#" onclick="???????????">Next</a>
    
        <script type="text/javascript">
          $(window).load(function () {
            $('.slideshow').blinds();
            var i = 1;
            setInterval(function () {
              if ( i == 7 ) i = 0;
              $('.slideshow').blinds_change(i);
              i ++;
            }, 5000);
          });
        </script>
    You can see the example here:
    http://neobux-guide.com/slideshow/

    Thank you!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,715
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viriol View Post
    The only thing I miss with the script is "Next"/"Previous" links to be able to go through the image sequence directly instead of having to wait 5 seconds.
    To achieve that, you're going to want previous() and next() functions. that can achieve that.

    We can easily get a next() function by modifying the existing code, which results in:

    Code javascript:
    function next() {
        if ( i == 7 ) i = 0;
            $('.slideshow').blinds_change(i);
            i ++;
        }
    }
    ...
    setInterval(next, 5000);

    You can use similar code for the previous() function too.

    The only other thing to do now, is to stop the setInterval when the previous/next buttons are being used. You can do that by initially assigning setInterval to a variable, so that you can then later remove by using clearInterval

    That could be done with something like:

    Code javascript:
    var i = 1,
        timer = setInterval(next, 5000);

    So that later on, when you want to run the previous or next functions separately, you can clear the interval with:

    Code javascript:
    clearInterval(timer);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for you answer! As my knowledge about JavaScript is about zero I'm getting a bit confused about this.

    Am I on the right path here?

    PHP Code:
        <a href="#" onclick="prev(); return false">Previous</a>
        <
    a href="#" onclick="next(); return false">Next</a>

        <
    script type="text/javascript">
        $(
    window).load(function () {
          $(
    '.slideshow').blinds();
          var 
    1;
          
    timer setInterval(next5000);
          function 
    next() {
            if ( 
    == 0;
            
    clearInterval(timer);
            $(
    '.slideshow').blinds_change(i);
            
    ++;
          }
        });
        function 
    prev() {
          if ( 
    == 0;
          
    clearInterval(timer);
          $(
    '.slideshow').blinds_change(i);
          
    --;
        }
        
    </script> 

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,715
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viriol View Post
    Am I on the right path here?
    Yes, you're getting there. You will need to think about what changes need to occur to the prev() function.

    The next() function checks if the i variable is too high, and if it is it then brings it down again.
    You need something different for the prev() function. There, you need to check if i is too low instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •