certainlyakey
6/23/2014 - 12:59 PM

Simple paginated slideshow on jQuery (Wordpress oriented)

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>&lt;</span>';
		var pagNextTxt = '<span>&gt;</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>')

	});
});