jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery

Question

I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output.

Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html).

How can I combine my 2 functions to do that?

// slideshow fx
$(function() {
        $('#slideshow').cycle({ 
        fx:     'fade',
        speed:  350,        
        prev:   '#prev', 
        next:   '#next', 
        timeout: 0,
        after:     onAfter
    });
});
//image counter output
function onAfter(curr,next,opts) {
    var caption = 
        (opts.currSlide + 1) + opts.slideCount;
        $('#counter').html(caption);
}

html:

<div id="slideshow-container">

<div class="slideshow-nav"><a id="prev" href=""></a></div>
<div class="slideshow-nav"><a id="next" href=""></a></div>

<div id="slideshow" class="pics">
    <img src="galleryA/01.jpg" />
    <img src="galleryA/02.jpg" />
    <img src="galleryA/03.jpg" />
    <img src="galleryA/04.jpg" />
    <img src="galleryA/05.jpg" />
    <img src="galleryA/06.jpg" />
</div>
</div>

Answer 1

Not too familiar with the cycle plugin, but you could put something like this in function onAfter:

if(opts.currSlide == opts.slideCount) { 
  $("#next").attr("href","galleryB.html"); 
}

or you could try

if(opts.currSlide == opts.slideCount) { 
 $("#next").click(function() { document.location = "galleryB.html"; });
}

Untested, something along those lines?

Basically it only attaches the redirect behaviour onto #next after the last slide has been shown.. There might be an onFinish option or something, have you checked the docs?

Answer 2

$(function() {
    $('#slideshow').cycle({ 
        fx:     'fade',
        speed:  350,        
        prev:   '#prev', 
        next:   '#next', 
        timeout: 0, 
        after:   onAfter
    });
    function onAfter(curr,next,opts) {
        var caption = '<p><span>' + (opts.currSlide + 1) + '</span> /' + opts.slideCount + '</p>';
        $('#counter').html(caption);

        if(opts.currSlide + 1 == opts.slideCount) { 
         $("#next").click(function() { document.location = "galleryB.html"; })
        }   
        if(opts.currSlide + 1 == 1) { 
         $("#prev").click(function() { document.location = "galleryD.html"; })
        }
    } 
});

Cycling forward with #next works fine but cycling backwards with #prev doesn't. If am e.g. in galleryA on image 5/10 and I press #prev, I jump to galleryD instead of image 4/10 ... why?

Answer 3

Hi,

You can have a look here :

http://helpdesk.toitl.com/?p=cycle_plugin

It is not so easy to integrate 2 synchronized cycles in the same page ... In this sample there is no reload of the page with location=... but the 2 galleries are managed using the different commands of the cycle plugin.

Regards, Dominique VINCENT