JQuery Cycle - #next #prev, goto nextGallery after the final slide of the current gallery
I am using a jQuery loop in multiple C # next #prev galleries by navigating and exiting an image counter.
Now I am trying to combine all these galleries. If the user has reached the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / # prev anchor should point to gallery C (galleryC.html).
How can I combine my 2 functions for this?
// 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>
a source to share
Not too familiar with the loop plugin, but you can put something like this in function onAfter
:
if(opts.currSlide == opts.slideCount) {
$("#next").attr("href","galleryB.html");
}
or you can try
if(opts.currSlide == opts.slideCount) {
$("#next").click(function() { document.location = "galleryB.html"; });
}
Unconfirmed, something like that?
Basically it only imparts redirection behavior to #next
after the last slide has been shown. Maybe an option onFinish
or something else, have you checked the documents?
a source to share
You can look here:
http://helpdesk.toitl.com/?p=cycle_plugin
It is not easy to integrate 2 synchronized loops on the same page ... In this example there is no page reload using location = ..., but 2 galleries are managed using different commands of the loop plugin.
Best regards, Dominic VINCENT
a source to share