/* * jQuery Orbit Plugin 1.2.3 * 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) { //Defaults to extend options var defaults = { animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push animationSpeed: 600, // how fast animtions are timer: true, // true or false to have the timer advanceSpeed: 4000, // if timer is enabled, time between transitions pauseOnHover: false, // if you hover pauses the slider startClockOnMouseOut: false, // if clock should start on MouseOut startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again directionalNav: true, // manual advancing directional navs captions: true, // do you want captions? captionAnimation: 'fade', // fade, slideOpen, none captionAnimationSpeed: 600, // if so how quickly should they animate in bullets: false, // true or false to activate the bullet navigation bulletThumbs: false, // thumbnails for the bullets bulletThumbLocation: '', // location from this file where thumbs will be afterSlideChange: function(){} // empty function }; //Extend those options var options = $.extend(defaults, options); return this.each(function() { // ============== // ! SETUP // ============== //Global Variables var activeSlide = 0, numberSlides = 0, orbitWidth, orbitHeight, locked; //Initialize var orbit = $(this).addClass('orbit'), orbitWrapper = orbit.wrap('
').parent(); orbit.add(orbitWidth).width('1px').height('1px'); //Collect all slides and set slider size of largest image var slides = orbit.children('img, a, div'); slides.each(function() { var _slide = $(this), _slideWidth = _slide.width(), _slideHeight = _slide.height(); if(_slideWidth > orbit.width()) { orbit.add(orbitWrapper).width(_slideWidth); orbitWidth = orbit.width(); } if(_slideHeight > orbit.height()) { orbit.add(orbitWrapper).height(_slideHeight); orbitHeight = orbit.height(); } numberSlides++; }); //Animation locking functions function unlock() { locked = false; } function lock() { locked = true; } //If there is only a single slide remove nav, timer and bullets if(slides.length == 1) { options.directionalNav = false; options.timer = false; options.bullets = false; } //Set initial front photo z-index and fades it in slides.eq(activeSlide) .css({"z-index" : 3}) .fadeIn(function() { //brings in all other slides IF css declares a display: none slides.css({"display":"block"}) }); // ============== // ! TIMER // ============== //Timer Execution function startClock() { if(!options.timer || options.timer == 'false') { return false; //if timer is hidden, don't need to do crazy calculations } else if(timer.is(':hidden')) { clock = setInterval(function(e){ shift("next"); }, options.advanceSpeed); //if timer is visible and working, let's do some math } else { 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"); } }, options.advanceSpeed/180); } } function stopClock() { if(!options.timer || options.timer == 'false') { return false; } else { timerRunning = false; clearInterval(clock); pause.addClass('active'); } } //Timer Setup if(options.timer) { var timerHTML = '
' orbitWrapper.append(timerHTML); var timer = orbitWrapper.children('div.timer'), timerRunning; if(timer.length != 0) { var rotator = $('div.timer span.rotator'), mask = $('div.timer span.mask'), pause = $('div.timer span.pause'), degrees = 0, clock; startClock(); timer.click(function() { if(!timerRunning) { startClock(); } else { stopClock(); } }); if(options.startClockOnMouseOut){ var outTimer; orbitWrapper.mouseleave(function() { outTimer = setTimeout(function() { if(!timerRunning){ startClock(); } }, options.startClockOnMouseOutAfter) }) orbitWrapper.mouseenter(function() { clearTimeout(outTimer); }) } } } //Pause Timer on hover if(options.pauseOnHover) { orbitWrapper.mouseenter(function() { stopClock(); }); } // ============== // ! CAPTIONS // ============== //Caption Setup if(options.captions) { var captionHTML = '
'; orbitWrapper.append(captionHTML); var caption = orbitWrapper.children('.orbit-caption'); setCaption(); } //Caption Execution function setCaption() { if(!options.captions || options.captions =="false") { return false; } else { var _captionLocation = slides.eq(activeSlide).data('caption'); //get ID from rel tag on image _captionHTML = $(_captionLocation).html(); //get HTML from the matching HTML entity //Set HTML for the caption if it exists if(_captionHTML) { caption .attr('id',_captionLocation) // Add ID caption .html(_captionHTML); // Change HTML in Caption //Animations for Caption entrances if(options.captionAnimation == 'none') { caption.show(); } if(options.captionAnimation == 'fade') { caption.fadeIn(options.captionAnimationSpeed); } if(options.captionAnimation == 'slideOpen') { caption.slideDown(options.captionAnimationSpeed); } } else { //Animations for Caption exits if(options.captionAnimation == 'none') { caption.hide(); } if(options.captionAnimation == 'fade') { caption.fadeOut(options.captionAnimationSpeed); } if(options.captionAnimation == 'slideOpen') { caption.slideUp(options.captionAnimationSpeed); } } } } // ================== // ! DIRECTIONAL NAV // ================== //DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev"); if(options.directionalNav) { if(options.directionalNav == "false") { return false; } var directionalNavHTML = '
RightLeft
'; orbitWrapper.append(directionalNavHTML); var leftBtn = orbitWrapper.children('div.slider-nav').children('span.left'), rightBtn = orbitWrapper.children('div.slider-nav').children('span.right'); leftBtn.click(function() { stopClock(); shift("prev"); }); rightBtn.click(function() { stopClock(); shift("next") }); } // ================== // ! BULLET NAV // ================== //Bullet Nav Setup if(options.bullets) { var bulletHTML = ''; orbitWrapper.append(bulletHTML); var bullets = orbitWrapper.children('ul.orbit-bullets'); for(i=0; i'+(i+1)+''); if(options.bulletThumbs) { var thumbName = slides.eq(i).data('thumb'); if(thumbName) { var liMarkup = $('
  • '+i+'
  • ') liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"}); } } orbitWrapper.children('ul.orbit-bullets').append(liMarkup); liMarkup.data('index',i); liMarkup.click(function() { stopClock(); shift($(this).data('index')); }); } setActiveBullet(); } //Bullet Nav Execution function setActiveBullet() { if(!options.bullets) { return false; } else { bullets.children('li').removeClass('active').eq(activeSlide).addClass('active'); } } // ==================== // ! SHIFT ANIMATIONS // ==================== //Animating the shift! function shift(direction) { //remember previous activeSlide var prevActiveSlide = activeSlide, slideDirection = direction; //exit function if bullet clicked is same as the current image if(prevActiveSlide == slideDirection) { return false; } //reset Z & Unlock function resetAndUnlock() { slides .eq(prevActiveSlide) .css({"z-index" : 1}); unlock(); options.afterSlideChange.call(this); } if(slides.length == "1") { return false; } if(!locked) { lock(); //deduce the proper activeImage if(direction == "next") { activeSlide++ if(activeSlide == numberSlides) { activeSlide = 0; } } else if(direction == "prev") { activeSlide-- if(activeSlide < 0) { activeSlide = numberSlides-1; } } else { activeSlide = direction; if (prevActiveSlide < activeSlide) { slideDirection = "next"; } else if (prevActiveSlide > activeSlide) { slideDirection = "prev" } } //set to correct bullet setActiveBullet(); //set previous slide z-index to one below what new activeSlide will be slides .eq(prevActiveSlide) .css({"z-index" : 2}); //fade if(options.animation == "fade") { slides .eq(activeSlide) .css({"opacity" : 0, "z-index" : 3}) .animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock); } //horizontal-slide if(options.animation == "horizontal-slide") { if(slideDirection == "next") { slides .eq(activeSlide) .css({"left": orbitWidth, "z-index" : 3}) .animate({"left" : 0}, options.animationSpeed, resetAndUnlock); } if(slideDirection == "prev") { slides .eq(activeSlide) .css({"left": -orbitWidth, "z-index" : 3}) .animate({"left" : 0}, options.animationSpeed, resetAndUnlock); } } //vertical-slide if(options.animation == "vertical-slide") { if(slideDirection == "prev") { slides .eq(activeSlide) .css({"top": orbitHeight, "z-index" : 3}) .animate({"top" : 0}, options.animationSpeed, resetAndUnlock); } if(slideDirection == "next") { slides .eq(activeSlide) .css({"top": -orbitHeight, "z-index" : 3}) .animate({"top" : 0}, options.animationSpeed, resetAndUnlock); } } //push-over if(options.animation == "horizontal-push") { if(slideDirection == "next") { slides .eq(activeSlide) .css({"left": orbitWidth, "z-index" : 3}) .animate({"left" : 0}, options.animationSpeed, resetAndUnlock); slides .eq(prevActiveSlide) .animate({"left" : -orbitWidth}, options.animationSpeed); } if(slideDirection == "prev") { slides .eq(activeSlide) .css({"left": -orbitWidth, "z-index" : 3}) .animate({"left" : 0}, options.animationSpeed, resetAndUnlock); slides .eq(prevActiveSlide) .animate({"left" : orbitWidth}, options.animationSpeed); } } setCaption(); } //lock }//orbit function });//each call }//orbit plugin call })(jQuery);