Skip to content

Instantly share code, notes, and snippets.

@jimfleming
Created August 10, 2010 21:44
Show Gist options
  • Save jimfleming/518083 to your computer and use it in GitHub Desktop.
Save jimfleming/518083 to your computer and use it in GitHub Desktop.
A simple slideshow plugin for jQuery
(function($) { // this ensures that the plugin doesn't conflict with other code and is recommended for jQuery plugins: http://docs.jquery.com/Plugins/Authoring
$.fn.slideshow = function(settings) { // declare the plugin function accepting a single argument 'settings' to override any of the defaults
var config = { 'delay' : 4000, 'active_class' : 'active', 'navigation_selector' : '#navigation a' }; // some defaults which can be overridden by 'settings' above
if (settings) $.extend(config, settings); // merge the defaults with the settings passed in above
this.each(function() { // for each jQuery object matching the selector (e.g. $('ul#some-list > li').each(function() {}); would call the function inside passing in each element as 'this')
var $this = $(this); // to prevent recreating a jQuery object every time I need $(this)
$this.css('position', 'relative'); // set the slide wrapper as relative
var $children = $this.children(); // get the immediate children of the slide wrapper
$children.css({ 'position' : 'absolute', 'top' : 0, 'left' : 0 }); // make sure they overlap
$children.hide(); // hide all of the slides
var current = 0; // the current index of the slideshow
$children.eq(current).show(); // show the slide at the current (0th) position
var $navigation = $(config.navigation_selector); // will need this later
var slideshow_loop = function() {
current = (current + 1) % $children.length; // increment the current index by one but mod (%) by the number of slides to force the slideshow to wrap
$children.fadeOut(); // fade out all children (should only be one slide)
$children.eq(current).fadeIn(); // fade in the current slide)
$navigation.removeClass(config.active_class); // remove the active class from all navigation elements
$navigation.eq(current).addClass(config.active_class); // add the active class to the current navigation element
};
var interval = setInterval(slideshow_loop, config.delay); // setInterval will call the function slideshow_loop every config.delay milliseconds
$navigation.click(function() { // when a navigation element is clicked
clearInterval(interval); // stop looping the slideshow
var $this = $(this); // the specific navigation element that was clicked
current = $navigation.index($this); // set the current index to the index of the navigation element clicked
$children.fadeOut();
$children.eq(current).fadeIn();
$navigation.removeClass(config.active_class);
$this.addClass(config.active_class);
setTimeout(function() { interval = setInterval(slideshow_loop, config.delay) }, config.delay * 2); // after 2*config.delay milliseconds start the slideshow ago
return false; // this prevents the browser from scrolling to the top and altering the url with the hash-url (#)
});
});
return this; // this allows chaining jQuery functions together by passing the jQuery element back out: e.g. $('#my-slideshow').slideshow().appendTo('#some-div')
};
})(jQuery); // pass jQuery in to the plugin
$('#slideshow').slideshow({ 'delay' : 4000, 'navigation_selector' : '#navigation li a' }); // run the slideshow plugin on the #slideshow element, overriding some of the defaults
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment