how to goto 2 slides

Question

I have 3 "main" slides. There is an "intermediate" slide in between each of the "main" slides and I was hoping I can achieve the following effect by click on the appropriate buttons

("go to slide 1", "go to slide 2","go to slide 3")

When user click button1 ("go to slide 1")

1) $('.cycle-slideshow').cycle('goto', intermediate slide);

2) perform a task (I need an intermediate slide image to create a zoom in effect)

2) $('.cycle-slideshow').cycle('goto', 1);

ans so on...

Thank you in advance for your help.

Answer 1

Maybe try something like this. I haven't tested it. But you want to use the advanced cycle2 api to write your own goto (jump) handler, as per this page: http://jquery.malsup.com/cycle2/api/advanced.php.

Here's the default jump function (search for jump: function): https://github.com/malsup/cycle2/blob/45fde557e8fb4c2d59a9667ba744b63a0da9916c/build/jquery.cycle2.js

So here's a modified version of their function (again not tested!):

$('.cycle-slideshow').on('cycle-bootstrap', function (e, optionHash, API) {
    // replace "jump (goto)" method with custom implementation.
    // This next part is the same as the original
    API.jump = function (index, fx) {
        var fwd;
        var opts = this.opts();
        if (opts.busy && !opts.manualTrump)
            return;
        var num = parseInt(index, 10);
        if (isNaN(num) || num < 0 || num >= opts.slides.length) {
            opts.API.log('goto: invalid slide index: ' + num);
            return;
        }
        if (num == opts.currSlide) {
            opts.API.log('goto: skipping, already on slide', num);
            return;
        }

        // put the remaining code in a function so you can call it twice
        function jump_inner(num) {
            opts.nextSlide = num;
            clearTimeout(opts.timeoutId);
            opts.timeoutId = 0;
            opts.API.log('goto: ', num, ' (zero-index)');
            fwd = opts.currSlide < opts.nextSlide;
            opts._tempFx = fx;
            opts.API.prepareTx(true, fwd);
        }

        // figure out the intermediate slide.  i'm just guessing on how you want to do this.  change the logic to whatever you need, or maybe the intermediate slide is the same for each button.
        var intermediate;
        switch (num) {
            case '1': 
                intermediate = 4;
                break;
            case '2': 
                intermediate = 5;
                break;
            case '3': 
                intermediate = 6;
                break;
        }

        // first do the intermediate.
        jump_inner(intermediate);

        // use setTimeout to wait some time then do the next slide
        setTimeout("jump_inner(num);", 2000);
    }
});