Skip to content

Instantly share code, notes, and snippets.

@sbeam
Created September 2, 2011 18:32
Show Gist options
  • Select an option

  • Save sbeam/1189411 to your computer and use it in GitHub Desktop.

Select an option

Save sbeam/1189411 to your computer and use it in GitHub Desktop.
cyclethrough() jquery plugin
/**
* loops through the collection given by 'selector' within the called node, and
* when the elem is moused-over (is that a word?) adjusts * the z-index at the
* given interval for each. Like an animated GIF for any set of DOM nodes!
* Meant to work with a set of images, like thumbnails, YMMV
*
* $('#video-thumbnails').cyclethrough('img', 800);
*
* author sbeam
* license MIT
*/
(function( $ ){
var methods = {
do_cycle : function(selector, delay) {
if (!this.cycleindex) this.cycleindex = 0;
if (this.cycleindex >= $(selector, this).length) this.cycleindex = 0;
$(selector, this).css('z-index', 0).eq(this.cycleindex).css('z-index', 1);
this.cycleindex++;
var context = this;
this.timer = window.setTimeout(function() { methods.do_cycle.apply(context, [selector, delay]) }, delay);
}
};
$.fn.cyclethrough = function(selector, delay) {
$(selector, this).css('z-index', 0);
return this.hover(function() { methods.do_cycle.apply(this, [selector, delay]) },
function() { window.clearTimeout(this.timer); });
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment