Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy
Created January 12, 2012 00:40
Show Gist options
  • Save crazy4groovy/1597733 to your computer and use it in GitHub Desktop.
Save crazy4groovy/1597733 to your computer and use it in GitHub Desktop.
rotate list of items, with many options
/*
* author: Steven Olsen
* contact: @crazy4groovy, crazy4groovy.blogspot.com
* version: 1.2.0
* license: MIT -- no guarantees, can't sue me (!), use it with due credit.
*/
(function ($) { $.fn.newsTicker = function (options) {
return this.each(function () {
var ul = this
var settings = jQuery.extend({
fadeSpeed: 1000,
pauseSeconds: 5,
numElsVisible: 1,
scramble: true,
reverse: true,
afterRotate: function ($ul) { }
}, options);
settings.pauseSeconds = ( parseInt(settings.pauseSeconds) || 5 ) * 1000;
settings.pauseSeconds += ( parseInt(settings.fadeSpeed) || 1000) * 2;
settings.numElsVisible = parseInt(settings.numElsVisible) || 1;
settings.numEls = $(this).children().length;
if (settings.numElsVisible < 1) settings.numElsVisible = 1;
else if (settings.numElsVisible > settings.numEls) settings.numElsVisible = settings.numEls;
this.setup = function () {
var self = $(ul)
self.children('li').hide();
if (settings.reverse) {
$.fn._reverse_ = [].reverse;
var lis = self.children('li')._reverse_()
self.append(lis)
}
if (settings.scramble) {
var scrambleTimes = Math.floor(Math.random() * (settings.numEls + 1));
for (i = 0; i < scrambleTimes; i++) {
newsTicker_lastListEl = self.children('li:last');
$(newsTicker_lastListEl).remove();
self.prepend(newsTicker_lastListEl);
}
}
newsTicker_currentEl = self.children('li:first')
for (i = 0; i < settings.numElsVisible; i++) {
$(newsTicker_currentEl).fadeIn(settings.fadeSpeed);
newsTicker_currentEl = $(newsTicker_currentEl).next();
}
settings.afterRotate(self);
}
var rotate = function () {
var self = $(ul)
var first = self.children('li:first');
newsTicker_lastListEl = self.children('li:last');
$(newsTicker_lastListEl).remove();
self.prepend(newsTicker_lastListEl);
// REMEMBER: now "first" is actually second!!!
self.children('li').hide();
newsTicker_currentEl = first; //second
for (i = 1; i < settings.numElsVisible; i++) {
$(newsTicker_currentEl).show();
newsTicker_currentEl = $(newsTicker_currentEl).next();
}
$(newsTicker_currentEl).show();
$(newsTicker_currentEl).fadeOut(settings.fadeSpeed,
function () {
first.prev().fadeIn(settings.fadeSpeed,
settings.afterRotate(self)
);
}
);
};
this.setup()
setInterval(rotate, settings.pauseSeconds)
});
}; })(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment