Simple paginated slideshow on jQuery (Wordpress oriented)
jQuery(document).ready(function ($) {
//Slideshow
//Simple slideshow that:
// - produces prev/next links,
// - produces numbered pagination,
// - may be loopable,
// - has auto advance feature.
//Optimized for Wordpress gallery but OK for any other use.
//CSS has to be set separately.
function slideshow(selector) {
var slC = selector; //this value should contain a slideshow container like div, it is not suited for 'ul' selector (because it cannot contain another uls as direct children) so better choose its parent
//User settings
var slEl = slC.find('li'); //slideshow element
var pagPrevTxt = '<span><</span>';
var pagNextTxt = '<span>></span>';
var hasPagination = false;
var loop = true;
var speed = 5000;
var autoAdvance = true; //loop setting must be true
//Script inner variables
slC.find(slEl).hide().first().addClass('current').show();
var count = slEl.length;
var currIndex = slEl.filter('.current').index();
var currIUp;
var currIDown;
var pagination = '<ul class="pagination" />';
var prevnext = '<ul class="prevnext"><li class="prev"><a href="javascript:void(0);">'+pagPrevTxt+'</a></li><li class="next"><a href="javascript:void(0);">'+pagNextTxt+'</a></li></ul>';
var slideShowInterval;
//Script inner functions
function moveCurrentPagination(nextCurrent) {
pagLink.removeClass('current').filter(':eq('+nextCurrent+')').addClass('current');
}
function moveCurrentSlide(nextCurrent) {
slEl.removeClass('current').hide().filter(':eq('+nextCurrent+')').addClass('current').fadeIn('fast');
}
function moveToPrev() {
currIDown = currIndex - 1;
prevEl.show();
nextEl.show();
if (currIDown > -1) {
if (hasPagination) {
moveCurrentPagination(currIDown);
}
if (!loop) {
if (currIDown === (0)) {
prevEl.hide();
}
}
moveCurrentSlide(currIDown);
currIndex = currIDown;
}
else if (currIDown === -1) {
if (loop) {
if (hasPagination) {
moveCurrentPagination(count-1);
}
moveCurrentSlide(count-1);
currIndex = (count-1);
}
}
}
function moveToNext() {
currIUp = currIndex + 1;
prevEl.show();
nextEl.show();
if (currIUp < count) {
if (hasPagination) {
moveCurrentPagination(currIUp);
}
if (!loop) {
if (currIUp === (count-1)) {
nextEl.hide();
}
}
moveCurrentSlide(currIUp);
currIndex++;
}
else if (currIUp === count) {
if (loop) {
if (hasPagination) {
moveCurrentPagination(0);
}
moveCurrentSlide(0);
currIndex = 0;
}
}
}
if (count > 1) {
//Insert pagination
if (hasPagination) {
slC.append(pagination);
var pagEl = slC.find('.pagination');
$(slEl).each(function(index) {
pagEl.append('<li><a href="javascript:void(0);">'+(index+1)+'</a></li>');
});
var pagLink = pagEl.find('a');
pagEl.find('a').first().addClass('current');
pagLink.on('click', function(e) {
e.preventDefault();
pagLink.removeClass('current');
$(this).addClass('current');
var pagLinkN = $(pagLink).index(this);
slEl.removeClass('current').hide().filter(':eq('+pagLinkN+')').addClass('current').show();
currIndex = pagLinkN;
});
}
var slLink = slEl.find('a');
slLink.on('click', function(e) {
e.preventDefault();
moveToNext();
});
//Insert prev and next navigation
if (count > 2) {
slC.after(prevnext);
var prevEl = slC.next('.prevnext').find('.prev');
var nextEl = slC.next('.prevnext').find('.next');
prevEl.on('click', function(e) {
e.preventDefault();
moveToPrev();
});
nextEl.on('click', function(e) {
e.preventDefault();
moveToNext();
});
if (!loop) {
prevEl.hide();
}
else {
if (autoAdvance) {
slideShowInterval = setInterval(moveToNext, speed);
}
}
}
}
}
$('.gallery').each( function() {
slideshow($(this));
// create a wrapper for easier pagination CSS positioning
//$(this).add('.prevnext').wrapAll('<div class="gallery-wrapper"></div>')
});
});