crazy4groovy
1/12/2012 - 12:40 AM

rotate list of items, with many options

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);