How can I reverse the order of pictures shown in a jQuery Cycle slideshow during playback?

Question

So my question is pretty straight-forward. Say I have a slideshow running with 'fade' transitions with 10 pictures in total, and I have the typical next/prev buttons as well. The slideshow cycles automatically from image 1 to image 10. How can I make it possible for the user to reverse the playback order at any moment? For example, while watching image 6, the user clicks 'prev' (or a new button if necessary), and after going back to image 5, the slideshow continues with image 4, 3, 2...

Is this even possible? I read about and tried the 'rev' option in Cycle, but I couldn't make it work, and actually I'm not sure that its purpose is the one I need.

THank you for any ideas!

Answer 1

Looking at the source, it looks like the rev option is only for animations, which doesn't apply to fade. Here is the exact comment:

// causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)

You may be looking for backwards:

// true to start slideshow at last slide and move backwards through the stack

Try setting that to true when you want to reverse the order.

EDIT: There is probably a better way to do this. In any case, here is one way. First, add a click handler to your button that calls some function:

function toggleDirection(){
    // replace your_slide_div with whatever your div is named
    $('.your_slide_div').cycle("toggleDirection");
}

Then in the cycle plugin JS file, look for the handleArguments(cont, options, arg2) function. In the switch statement, add a case:

case "toggleDirection":
        $(cont).data('cycle.opts').backwards = $(cont).data('cycle.opts').backwards ? false : true;
        if($(cont).data('cycle.opts').backwards)
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide - 2 < 0 ? 
                $(cont).children().length - 1 : $(cont).data('cycle.opts').nextSlide - 2;
        else
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide + 2 >= $(cont).children().length ? 
                0 : $(cont).data('cycle.opts').nextSlide + 2;
        return false;

EDIT: This case assumes that you are sliding through all your images. If you are using the slideExpr option, then this will cause problems.

Note that this toggles the direction, so clicking the button twice returns it to normal, if you only want it to reverse it, change the case to:

(cont).data('cycle.opts').backwards = true;

EDIT: Last one hopefully. In the plugin JS file, do a search for the following:

opts.nextSlide < opts.currSlide

Replace that specific selection with:

opts.currSlide == els.length - 1