Jquery Cycle Plugin

Question

I've been using the jquery cycle plugin (malsup.com/jquery/cycle) and it's doing exactly as I want except that it doesn't seem to recognise the first slide as slide one. I'm using the onAfter function to to turn the next/prev links on and off as appropriate and to display page 1 of ? but the next link persists on its own on page 2 (when you would expect the prev link to have appeared) and, although the pages are counted correctly, page 2 shows up as page 1 of 7 same as the real page one). You can see what I mean at:

http://www.nottingham.ac.uk/~ttzelrn/ma-tesol/module1/unit1/index.php

The structure of divs is quite involved but I think it's sound and, as I say, the plugin is counting the divs ok.

Code below:

$(document).ready(function() {
      $('#cycle-content').cycle({
      fx:     'none',
      prev:   '#prev',
      next:   '#next',
      after:   onAfter,
      timeout: 0
      });

function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();

var caption = 'Page ' + (opts.currSlide + 1) + ' of ' +
opts.slideCount;
$('#caption').html(caption);
}

});

I'd be really grateful for any help with this.

Matthew

Answer 1

You are not incrementing currSlide in your after callback. Try something like this:

$(document).ready(function() {
      $('#cycle-content').cycle({
      fx:     'none',
      prev:   '#prev',
      next:   '#next',
      after:   onAfter,
      timeout: 0
      });
});

function onAfter(curr, next, opts) {
    var index = opts.currSlide;
    $('#prev')[index == 0 ? 'hide' : 'show']();
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
    opts.currSlide++;
    var caption = 'Page ' + (opts.currSlide) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

Answer 2

awesome.. had been looking for this same thing (hide 'prev' when at first slide, hide 'next' when on last slide..)

what if instead of "hide" and "show" I need to do:

.css('visibility','hidden');   //   and
.css('visibility','visible');

thank you..