jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery
I am using jQuery cycle in several galleries with #nex开发者_JS百科t #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>
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?
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
精彩评论