A carousel of paging thumbnails and content

HFCCarousel.js

/**
 * HFCCarousel
 * @fileoverview Carousel script to show content based on a paging set of thumbnails
 * @author Jay Contonio - jcontonio.com
 * @requires @link https://gist.github.com/810260 
 * @requires HFC Carousel Drupal module (could be easily adapted elsewhere)
 * @see HFCSlider
 * @example http://sabin.org/
 */

/**
 * @constructor 
 * @param {String} container A container id for the entire carousel
 * @param {Number} itemsPerPage How many items are on each thumbnail page
 * @param {Number} spacing The margin of the thumbnails (usually margin-right)
 * @param {Number} speed Auto-advance speed in miliseconds
 * @returns {Object} Returns itself for chaining
 */
var HFCCarousel = function(container, itemsPerPage, spacing, speed) {

	this._carouselContainer = container;
	this._itemsPerPage = itemsPerPage;
	this._spacing = spacing;
	this._carouselSpeed = speed || 10000;
	this._carouselCount = 0;
	this._carouselInterval;
	this._carouselTotal = this._carouselContainer.find('.slides li').length;
	
	// Set the first thumbnail as active
	this._carouselContainer.find('.thumbnails li:first').addClass('active');
	
	// Show the first slide
	this._carouselContainer.find('.slides li:first').show();
	
	// Manually set the height of the slide area based on the first list item (this can be overridden in a stylesheet)
	this._carouselContainer.find('.slides').height(this._carouselContainer.find('.slides li:first').height());
	
	// Manually set the height of the thumbnail area (can be overridden in a stylesheet)
	this._carouselContainer.find('.thumbnails .mask').height(this._carouselContainer.find('.thumbnails li:first').height());
	
	// Use HFCSlider for the thumbnail carousel
	// @see @link https://gist.github.com/810260 
	var settings = {
		'controller': this,
		'mask': this._carouselContainer.find('.thumbnails .mask'),
		'container': this._carouselContainer.find('.thumbnails ol'),
		'listItems': this._carouselContainer.find('.thumbnails li'),
		'arrowClass': this._carouselContainer.find('.thumbnails .arrow'),
		'wrapping': false,
		'slidesPer': this._itemsPerPage,
		'spacing': this._spacing
	}
	this._slider = new HFCSlider(settings);
	
	// Attach the click event for thumbnails
	var that = this;
	this._carouselContainer.find('.thumbnails li a').each(function(i) {
		$(this).click(function(e) {
			e.preventDefault();
			that._carouselCount = i;
			that.selectThumbnail(i);
			that.selectSlide(i);
			that.killTimer();
		});
	});
	
	// Add a listener for the time event
	$(this).bind('HFC_CAROUSEL_TIME_EVENT', this.swapSlide);
	
	// Add a listener for the click event coming from HFCSlider
	$(this).bind('HFC_CAROUSEL_CLICK_EVENT', this.clickEventHandler);
	
	return this;
}


/**
 * @returns {Number} Returns the speed the auto-advance is happening at in miliseconds 
 */
HFCCarousel.prototype.speed = function()
{
	return this._carouselSpeed;
}


/**
 * @returns {Object} Returns the container div for this carousel 
 */
HFCCarousel.prototype.container = function()
{
	return _carouselContainer;
}


/**
 * Selects a thumbnail by its index
 * @param {Number} index The array index of the thumbnail (starts with 0)
 */
HFCCarousel.prototype.selectThumbnail = function(index)
{
	this._carouselContainer.find('.thumbnails li').removeClass('active');
	this._carouselContainer.find('.thumbnails li:nth-child(' + (index + 1) + ')').addClass('active');
}


/**
 * Selects the slide by its index
 * @param {Number} index The array index of the slide (starts with 0) 
 */
HFCCarousel.prototype.selectSlide = function(index)
{
	this._carouselContainer.find('.slides ol').fadeOut(function() {
		$(this).find('li').hide();
		$(this).find('li:nth-child(' + (index + 1) + ')').show();
		$(this).fadeIn();
	});
}


/**
 * Starts a timer using this._carouselSpeed.
 * @event 'HFC_CAROUSEL_TIME_EVENT'
 */
HFCCarousel.prototype.startTimer = function()
{
	var carouselEvent = new jQuery.Event('HFC_CAROUSEL_TIME_EVENT');
	carouselEvent.caller = this;
	this._carouselInterval = setInterval(function() {
		$(carouselEvent.caller).trigger(carouselEvent);
	}, this._carouselSpeed);
}
	

/**
 * Total reset. Stops the timer, sets all positions to zero, and starts the timer over 
 */
HFCCarousel.prototype.reset = function()
{
	this.killTimer();
	this._carouselCount = 0;
	this._slider.move(0);
	this.selectThumbnail(0);
	this.selectSlide(0);
	this.startTimer();
}


/**
 * Stops the timer. Happens on any clickEvent 
 */
HFCCarousel.prototype.killTimer = function()
{
	clearInterval(this._carouselInterval);
}


/**
 * Event handler for clicking outside of this script
 * @param {Object} e Mouse event 
 */
HFCCarousel.prototype.clickEventHandler = function(e)
{
	this.killTimer();
}


/**
 * Increases the current active index and selects the corresponding thumbnail and slide
 * @param {Object} e Timer event  
 */
HFCCarousel.prototype.swapSlide = function(e) 
{
	var that = e.caller;
	that._carouselCount++;
	// If we're at the last carousel item stop
	if (that._carouselCount >= that._carouselTotal)
	{
		that.reset();
		return false;
	}
	// If we're moving onto the next page, adjust the carousel navigation
	if (that._carouselCount % that._itemsPerPage === 0)
	{
		that._slider.move('next');
	}
	
	// select the next item
	that.selectThumbnail(that._carouselCount);
	that.selectSlide(that._carouselCount);
}


$(document).ready(function() {

	// Create a new carousel item by passing the container, items per page, spacing and an optional speed (10000 is default)
	var hfcCarousel = new HFCCarousel($('#block-hfc_carousel-0'), 3, 17, 5000);
	hfcCarousel.startTimer();
	
});