Last active
December 28, 2015 19:36
-
-
Save certainlyakey/450860dd88d20bb2cf63 to your computer and use it in GitHub Desktop.
Simple paginated slideshow on jQuery (Wordpress oriented)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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>') | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment