/** * jquery.simpleshow. A really simple slideshow that does exactly that. * * Copyright (c) 2009 Liam Gooding * http://goodingsmedia.com/labs/simpleshow/ * * Dual licensed under MIT and GPL 3 licenses * http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/gpl-3.0.html * * This copyright notice must remain intact. * * Launch : April 2009 * Version : 0.2.0 - April 18th 2009 */ /** * create closure **/ (function($) { /** * Main jQuery plugin definition **/ $.fn.simpleshow = function(options) { // Extend our default options with those provided var opts = $.extend({}, $.fn.simpleshow.defaults, options); // our container element var $cont = this; // our main timer var timer = null; // set the container element to be relatively positioned $cont.css({position: 'relative'}); // Presets the opacity of all children and set them to be absolutely positioned $cont.children().each(function(){ $(this).fadeOut(0); $(this).css({position: 'absolute', top: 0, left: 0}); }); // only show the first active one var $first = $cont.children('.active'); if ( $first.length == 0 ) { $first = $cont.children(':first'); $first.addClass('active'); } // Set the first pagination to have active class if(opts.pagination != null){ $(opts.pagination).children(':first').addClass('active'); } $first.fadeIn(0); /** * Public API **/ $.extend( this, { start: function() { // create our interval to repeat the slideSwitch function // stops the slideshow from breaking if the user keeps accessing start if(timer == null){ timer = setInterval(function(){ _switchSlide($cont, opts); } , opts.speed ); } }, pause: function($cont) { clearInterval(timer); timer = null; }, next: function() { this.pause(); _switchSlide($cont, opts); this.start(); }, prev: function() { this.pause(); _switchSlide($cont, opts, 'prev'); this.start(); }, goTo: function(num) { this.pause(); _switchSlide($cont, opts, null, num); this.start(); } } ); return this; }; /** * Changes the currently visible slide. Private **/ function _switchSlide($cont, opts, direction, goTo){ // default direction is next var direction = (direction == null) ? "next" : direction; // move the active class for the pagination if(opts.pagination != null){ var $contPagi = $(opts.pagination); var $activePagi = $contPagi.children('.active'); if(goTo != null){ $nextPagi = $contPagi.children().eq(goTo); } else { // work out which one we're switching to, the next or the pevious object if(direction == 'next'){ $nextPagi = $activePagi.next().length ? $activePagi.next() : $contPagi.children(':first'); } else if(direction == 'prev'){ $nextPagi = $activePagi.prev().length ? $activePagi.prev() : $contPagi.children(':last'); } } $activePagi.removeClass('active'); $nextPagi.addClass('active'); } // get the active slide var $active = $cont.children('.active'); // the next slide that we're going to fade in var $next = null; // are we trying to go to a specific slide number? if(goTo != null){ $next = $cont.children().eq(goTo); } else { // work out which one we're switching to, the next or the pevious object if(direction == 'next'){ $next = $active.next().length ? $active.next() : $cont.children(':first'); } else if(direction == 'prev'){ $next = $active.prev().length ? $active.prev() : $cont.children(':last'); } } // fade out the active slide to 0 opacity $active.fadeOut(opts.fadeSpeed, function(){ $active.removeClass('active'); }); // now begin to fade in our next slide $next.fadeIn(opts.fadeSpeed, function(){ $next.addClass('active'); }); } /** * the defaults **/ $.fn.simpleshow.defaults = { speed: 2000, childType: 'img', fadeSpeed: 500, pagination: null } /** * End closure **/ })(jQuery);