Jquery problem - adding previous and next to numbered slideshow

[samslystone]

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

[AndrewGSW]

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!

[vwphillips]

$(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;
}

  <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>

[samslystone]

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

[samslystone]

I would like it to look like this:

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

S

[vwphillips]

  <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>

[samslystone]

Thanks again Vic!