2

I'm trying to use the jQuery cycle plugin to manually advance a slideshow presentation. However, I want to fade out the entire slideshow when the end is reached, i.e. when viewing the last slide, click next and fade out.

Seems like the "end" callback function only works when it's automatically advancing.

Any suggestions?

Adam
  • 9,189
  • 15
  • 46
  • 62

2 Answers2

1

I've had this problem before too. This is a pretty good way to do it:

var num = 0;
$('#slideshow').cycle({
     fx:     'scrollHorz', 
    prev:   '#prev', 
    next:   '#next', 
    nowrap : 1,
    timeout : 0,
    after : function(c,n,o,f) {
        num++;
        if ( o.slideCount === num) {
            $('#slideshow').fadeTo('fast',0);
        }

    }

});

You can see it working here: http://jsfiddle.net/Nfpr2/14/

wesbos
  • 25,839
  • 30
  • 106
  • 143
0

I've had this problem too but I had to be sure that the user had viewed all the slides so I made some changes on Wes' code.

var num = 0;
$('#slideshow').cycle({
    fx:     'fade', 
    prev:   '#prev', 
    next:   '#next', 
    nowrap : 1,
    timeout : 0,
    after : function(c,n,o,f) {
        (f) ? num++ : num--;
        if ((o.slideCount == num) || ((o.slideCount *= -1) == num)) {
            $('#slideshow').fadeTo('fast',0);
        }
    }
});

You can try it here: http://jsfiddle.net/revagomes/RQEeN/

revagomes
  • 152
  • 10