jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery
- by FHP
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>
