Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Jquery problem - adding previous and next to numbered slideshow

    Hi all

    Having a problem adding a 'next' and 'previous' button to the following page:

    www.catherinehyland.co.uk/2012/work/work.html

    Currently the user can navigate by clicking on the numbers. However, I would like to add a 'previous' link before the numbers, on the same line, and a 'next' link after the numbers, taking the user back and forward respectively. Can anyone help?

    S

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I was about to say "what numbers" but I did Ctrl-A and I could (just about) see them: think they need to be a bit more prominent

    I suggest you add and style the next and previous buttons firstly, before trying to add jQuery to them: it is difficult to discuss code for elements that don't yet exist!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
    $(document).ready(function() {
     Next.lgth=8;
     Next.index=0;
     $("#nxt").click(function() {
      Next(1);
     });
     $("#bak").click(function() {
      Next(-1);
     });
     $("#cf7_controls").on('click', 'span', function() {
     $("#cf7 img").removeClass("opaque");
     Next.index = $(this).index();
     $("#cf7 img").eq(Next.index).addClass("opaque");
     $("#cf7_controls span").removeClass("selected");
     $("#cf7_controls span").eq(Next.index).addClass("selected");
    });
    });
    
    function Next(ud){
     ud=Next.index+ud;
     ud=ud<0?Next.lgth:ud>Next.lgth?0:ud;
     $("#cf7 img").removeClass("opaque");
     $("#cf7 img").eq(ud).addClass("opaque");
     $("#cf7_controls span").removeClass("selected");
     $("#cf7_controls span").eq(ud).addClass("selected");
     Next.index=ud;
    }
    Code:
      <p id="cf7_controls">
    <input id="bak" type="button" name="" value="Back" />
        <span class="selected">01</span>
        <span>02</span>
        <span>03</span>
        <span>04 </span>
        <span>05 </span>
        <span>06 </span>
        <span>07 </span>
        <span>08 </span>
        <span>09 </span>
    <input id="nxt" type="button" name="" value="Next" />  </p>
        </p>
    </div>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    samslystone (12-15-2012)

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Vic, thank you so much, you are a lifesaver!

    Just one thing. Can I change the buttons so they appear simply as text, rather than a button? I would rather they not appear with the grey box around them but have them as simple text 'next' and 'back'. Apart from that it works beautifully!

    All the best

    S

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I would like it to look like this:

    www.catherinehyland.co.uk/2012/work/work.html

    S

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    Code:
      <p id="cf7_controls">
        <a class="clo" id="bak" >back</a><!-- any element other than a span -->
        <span class="selected">01</span>
        <span>02</span>
        <span>03</span>
        <span>04 </span>
        <span>05 </span>
        <span>06 </span>
        <span>07 </span>
        <a class="clo" id="nxt" >next</a> <!-- any element other than a span -->
            </p>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks again Vic!


  •  

    Tags for this Thread

    Posting Permissions

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