/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.orbit = function(options) {
//Yo' defaults
var defaults = {
animation: 'fade', //fade, horizontal-slide, vertical-slide
animationSpeed: 800, //how fast animtions are
advanceSpeed: 4000, //if auto advance is enabled, time between transitions
startClockOnMouseOut: true, //if clock should start on MouseOut
startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
directionalNav: true, //manual advancing directional navs
captions: true, //do you want captions?
captionAnimationSpeed: 800, //if so how quickly should they animate in
timer: false, //true or false to have the timer
bullets: false //true or false to activate the bullet navigation
};
//Extend those options
var options = $.extend(defaults, options);
return this.each(function() {
//important global goodies
var activeImage = 0;
var numberImages = 0;
var orbitWidth;
var orbitHeight;
var locked;
//Grab each Shifter and add the class
var orbit = $(this).addClass('orbit')
//Collect all images and set slider size to biggest o' da images
var images = orbit.find('img, a img');
images.each(function() {
var _img = $(this);
var _imgWidth = _img.width();
var _imgHeight = _img.height();
orbit.width(_imgWidth);
orbitWidth = orbit.width()
orbit.height(_imgHeight)
orbitHeight = orbit.height();
numberImages++;
});
//set initial front photo z-index
images.eq(activeImage).css({"z-index" : 3});
//Timer info
if(options.timer) {
var timerHTML = '
'
orbit.append(timerHTML);
var timer = $('div.timer')
var timerRunning;
if(timer.length != 0) {
var speed = (options.advanceSpeed)/180;
var rotator = $('div.timer span.rotator')
var mask = $('div.timer span.mask')
var pause = $('div.timer span.pause')
var degrees = 0;
var clock;
function startClock() {
timerRunning = true;
pause.removeClass('active')
clock = setInterval(function(e){
var degreeCSS = "rotate("+degrees+"deg)"
degrees += 2
rotator.css({
"-webkit-transform": degreeCSS,
"-moz-transform": degreeCSS,
"-o-transform": degreeCSS
})
if(degrees > 180) {
rotator.addClass('move')
mask.addClass('move')
}
if(degrees > 360) {
rotator.removeClass('move')
mask.removeClass('move')
degrees = 0;
shift("next")
}
}, speed);
};
function stopClock() {
timerRunning = false;
clearInterval(clock)
pause.addClass('active')
}
startClock();
timer.click(function() {
if(!timerRunning) {
startClock();
} else {
stopClock();
}
})
if(options.startClockOnMouseOut){
var outTimer;
orbit.mouseleave(function() {
outTimer = setTimeout(function() {
if(!timerRunning){
startClock();
}
}, options.startClockOnMouseOutAfter)
})
orbit.mouseenter(function() {
clearTimeout(outTimer);
})
}
}
}
//animation locking functions
function unlock() {
locked = false;
}
function lock() {
locked = true;
}
//CaptionComputing
if(options.captions) {
var captionHTML = '
';
orbit.append(captionHTML);
var caption = orbit
.children('div.caption')
.children('span')
.addClass('orbit-caption')
.show();
function setCaption() {
var _captionLocation = images.eq(activeImage).attr('rel'); //get ID from rel tag on image
var _captionHTML = $("#"+_captionLocation).html(); //get HTML from the matching HTML entity
var _captionHeight = caption.height() + 20; //set height of the caption
caption
.attr('id',"#"+_captionLocation) // Add ID caption
.html(_captionHTML); // Change HTML in Caption
if(!_captionHTML) {
caption.parent().stop().animate({"bottom" : -_captionHeight}, options.captionAnimationSpeed);
} else {
caption.parent().stop().animate({"bottom" : 0}, options.captionAnimationSpeed);
}
}
setCaption();
}
//DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev");
if(options.directionalNav) {
var directionalNavHTML = 'RightLeft
';
orbit.append(directionalNavHTML);
var leftBtn = orbit.children('div.slider-nav').children('span.left');
var rightBtn = orbit.children('div.slider-nav').children('span.right');
leftBtn.click(function() {
if(options.timer) { stopClock(); }
shift("prev");
});
rightBtn.click(function() {
if(options.timer) { stopClock(); }
shift("next")
});
}
//BulletControls
if(options.bullets) {
var bulletHTML = '';
orbit.append(bulletHTML);
var bullets = $('ul.orbit-bullets');
for( i=0; i'+i+'')
$('ul.orbit-bullets').append(liMarkup);
liMarkup.data('index',i);
liMarkup.click(function() {
if(options.timer) { stopClock(); }
shift($(this).data('index'));
});
}
function setActiveBullet() {
bullets.children('li').removeClass('active').eq(activeImage).addClass('active')
}
setActiveBullet();
}
//Animating the shift!
function shift(direction) {
//remember previous activeImg
var prevActiveImage = activeImage;
var slideDirection = direction;
//exit function if bullet clicked is same as the current image
if(prevActiveImage == slideDirection) { return false; }
//reset Z & Unlock
function resetAndUnlock() {
images.eq(prevActiveImage).css({"z-index" : 1});
unlock();
}
if(!locked) {
lock();
//deduce the proper activeImage
if(direction == "next") {
activeImage++
if(activeImage == numberImages) {
activeImage = 0;
}
} else if(direction == "prev") {
activeImage--
if(activeImage < 0) {
activeImage = numberImages-1;
}
} else {
activeImage = direction;
if (prevActiveImage < activeImage) {
slideDirection = "next";
} else if (prevActiveImage > activeImage) {
slideDirection = "prev"
}
}
//set to correct bullet
if(options.bullets) { setActiveBullet(); }
//fade
if(options.animation == "fade") {
images.eq(prevActiveImage).css({"z-index" : 2});
images.eq(activeImage).css({"opacity" : 0, "z-index" : 3})
.animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock);
if(options.captions) { setCaption(); }
}
//horizontal-slide
if(options.animation == "horizontal-slide") {
images.eq(prevActiveImage).css({"z-index" : 2});
if(slideDirection == "next") {
images.eq(activeImage).css({"left": orbitWidth, "z-index" : 3})
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
}
if(slideDirection == "prev") {
images.eq(activeImage).css({"left": -orbitWidth, "z-index" : 3})
.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
}
if(options.captions) { setCaption(); }
}
//vertical-slide
if(options.animation == "vertical-slide") {
images.eq(prevActiveImage).css({"z-index" : 2});
if(slideDirection == "prev") {
images.eq(activeImage).css({"top": orbitHeight, "z-index" : 3})
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
}
if(slideDirection == "next") {
images.eq(activeImage).css({"top": -orbitHeight, "z-index" : 3})
.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
}
if(options.captions) { setCaption(); }
}
} //lock
}//orbit function
});//each call
}//orbit plugin call
})(jQuery);