/** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.js * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11, 2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */ // Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias (function($) { /** * $ is an alias to jQuery object * */ $.fn.lightBox = function(settings) { // Settings to configure the jQuery lightBox plugin how you like settings = jQuery.extend({ // Configuration related to overlay overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9 // Configuration related to navigation fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface. // Configuration related to images imageLoading: 'img/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon imageBtnPrev: 'img/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image imageBtnNext: 'img/lightbox-btn-next.gif', // (string) Path and the name of the next button image imageBtnClose: 'img/lightbox-btn-close.gif', // (string) Path and the name of the close btn imageBlank: 'img/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel) // Configuration related to container image box containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default. // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts. txtImage: 'Image', // (string) Specify text "Image" txtOf: 'of', // (string) Specify text "of" // Configuration related to keyboard navigation keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to. keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image keyToNext: 'n', // (string) (n = next) Letter to show the next image. // Donīt alter these variables in any way imageArray: [], activeImage: 0 },settings); // Caching the jQuery object with all elements matched var jQueryMatchedObj = this; // This, in this context, refer to jQuery object /** * Initializing the plugin calling the start function * * @return boolean false */ function _initialize() { _start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked return false; // Avoid the browser following the link } /** * Start the jQuery lightBox plugin * * @param object objClicked The object (link) whick the user have clicked * @param object jQueryMatchedObj The jQuery object with all elements matched */ function _start(objClicked,jQueryMatchedObj) { // Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay. $('embed, object, select').css({ 'visibility' : 'hidden' }); // Call the function to create the markup structure; style some elements; assign events in some elements. _set_interface(); // Unset total images in imageArray settings.imageArray.length = 0; // Unset image active information settings.activeImage = 0; // We have an image set? Or just an image? Letīs see it. if ( jQueryMatchedObj.length == 1 ) { settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title'))); } else { // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references for ( var i = 0; i < jQueryMatchedObj.length; i++ ) { settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title'))); } } while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) { settings.activeImage++; } // Call the function that prepares image exibition _set_image_to_view(); } /** * Create the jQuery lightBox plugin interface * * The HTML markup will be like that:
* */ function _set_interface() { // Apply the HTML markup into body tag $('body').append('
'); // Get page sizes var arrPageSizes = ___getPageSize(); // Style overlay and show it $('#jquery-overlay').css({ backgroundColor: settings.overlayBgColor, opacity: settings.overlayOpacity, width: arrPageSizes[0], height: arrPageSizes[1] }).fadeIn(); // Get page scroll var arrPageScroll = ___getPageScroll(); // Calculate top and left offset for the jquery-lightbox div object and show it $('#jquery-lightbox').css({ top: arrPageScroll[1] + (arrPageSizes[3] / 10), left: arrPageScroll[0] }).show(); // Assigning click events in elements to close overlay $('#jquery-overlay,#jquery-lightbox').click(function() { _finish(); }); // Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() { _finish(); return false; }); // If window was resized, calculate the new overlay dimensions $(window).resize(function() { // Get page sizes var arrPageSizes = ___getPageSize(); // Style overlay and show it $('#jquery-overlay').css({ width: arrPageSizes[0], height: arrPageSizes[1] }); // Get page scroll var arrPageScroll = ___getPageScroll(); // Calculate top and left offset for the jquery-lightbox div object and show it $('#jquery-lightbox').css({ top: arrPageScroll[1] + (arrPageSizes[3] / 10), left: arrPageScroll[0] }); }); } /** * Prepares image exibition; doing a imageīs preloader to calculate itīs size * */ function _set_image_to_view() { // show the loading // Show the loading $('#lightbox-loading').show(); if ( settings.fixedNavigation ) { $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); } else { // Hide some elements $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide(); } // Image preload process var objImagePreloader = new Image(); objImagePreloader.onload = function() { $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]); // Perfomance an effect in the image container resizing it _resize_container_image_box(objImagePreloader.width,objImagePreloader.height); // clear onLoad, IE behaves irratically with animated gifs otherwise objImagePreloader.onload=function(){}; }; objImagePreloader.src = settings.imageArray[settings.activeImage][0]; }; /** * Perfomance an effect in the image container resizing it * * @param integer intImageWidth The imageīs width that will be showed * @param integer intImageHeight The imageīs height that will be showed */ function _resize_container_image_box(intImageWidth,intImageHeight) { // Get current width and height var intCurrentWidth = $('#lightbox-container-image-box').width(); var intCurrentHeight = $('#lightbox-container-image-box').height(); // Get the width and height of the selected image plus the padding var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the imageīs width and the left and right padding value var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the imageīs height and the left and right padding value // Diferences var intDiffW = intCurrentWidth - intWidth; var intDiffH = intCurrentHeight - intHeight; // Perfomance the effect $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); }); if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) { if ( $.browser.msie ) { ___pause(250); } else { ___pause(100); } } $('#lightbox-container-image-data-box').css({ width: intImageWidth }); $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) }); }; /** * Show the prepared image * */ function _show_image() { $('#lightbox-loading').hide(); $('#lightbox-image').fadeIn(function() { _show_image_data(); _set_navigation(); }); _preload_neighbor_images(); }; /** * Show the image information * */ function _show_image_data() { $('#lightbox-container-image-data-box').slideDown('fast'); $('#lightbox-image-details-caption').hide(); if ( settings.imageArray[settings.activeImage][1] ) { $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show(); } // If we have a image set, display 'Image X of X' if ( settings.imageArray.length > 1 ) { $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show(); } } /** * Display the button navigations * */ function _set_navigation() { $('#lightbox-nav').show(); // Instead to define this configuration in CSS file, we define here. And itīs need to IE. Just. $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); // Show the prev button, if not the first image in set if ( settings.activeImage != 0 ) { if ( settings.fixedNavigation ) { $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }) .unbind() .bind('click',function() { settings.activeImage = settings.activeImage - 1; _set_image_to_view(); return false; }); } else { // Show the images button for Next buttons $('#lightbox-nav-btnPrev').unbind().hover(function() { $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' }); },function() { $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); }).show().bind('click',function() { settings.activeImage = settings.activeImage - 1; _set_image_to_view(); return false; }); } } // Show the next button, if not the last image in set if ( settings.activeImage != ( settings.imageArray.length -1 ) ) { if ( settings.fixedNavigation ) { $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }) .unbind() .bind('click',function() { settings.activeImage = settings.activeImage + 1; _set_image_to_view(); return false; }); } else { // Show the images button for Next buttons $('#lightbox-nav-btnNext').unbind().hover(function() { $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' }); },function() { $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' }); }).show().bind('click',function() { settings.activeImage = settings.activeImage + 1; _set_image_to_view(); return false; }); } } // Enable keyboard navigation _enable_keyboard_navigation(); } /** * Enable a support to keyboard navigation * */ function _enable_keyboard_navigation() { $(document).keydown(function(objEvent) { _keyboard_action(objEvent); }); } /** * Disable the support to keyboard navigation * */ function _disable_keyboard_navigation() { $(document).unbind(); } /** * Perform the keyboard actions * */ function _keyboard_action(objEvent) { // To ie if ( objEvent == null ) { keycode = event.keyCode; escapeKey = 27; // To Mozilla } else { keycode = objEvent.keyCode; escapeKey = objEvent.DOM_VK_ESCAPE; } // Get the key in lower case form key = String.fromCharCode(keycode).toLowerCase(); // Verify the keys to close the ligthBox if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) { _finish(); } // Verify the key to show the previous image if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) { // If weīre not showing the first image, call the previous if ( settings.activeImage != 0 ) { settings.activeImage = settings.activeImage - 1; _set_image_to_view(); _disable_keyboard_navigation(); } } // Verify the key to show the next image if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) { // If weīre not showing the last image, call the next if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) { settings.activeImage = settings.activeImage + 1; _set_image_to_view(); _disable_keyboard_navigation(); } } } /** * Preload prev and next images being showed * */ function _preload_neighbor_images() { if ( (settings.imageArray.length -1) > settings.activeImage ) { objNext = new Image(); objNext.src = settings.imageArray[settings.activeImage + 1][0]; } if ( settings.activeImage > 0 ) { objPrev = new Image(); objPrev.src = settings.imageArray[settings.activeImage -1][0]; } } /** * Remove jQuery lightBox plugin HTML markup * */ function _finish() { $('#jquery-lightbox').remove(); $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); }); // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay. $('embed, object, select').css({ 'visibility' : 'visible' }); } /** / THIRD FUNCTION * getPageSize() by quirksmode.com * * @return Array Return an array with page width, height and window width, height */ function ___getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); return arrayPageSize; }; /** / THIRD FUNCTION * getPageScroll() by quirksmode.com * * @return Array Return an array with x,y page scroll values. */ function ___getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; xScroll = document.body.scrollLeft; } arrayPageScroll = new Array(xScroll,yScroll); return arrayPageScroll; }; /** * Stop the code execution from a escified time in milisecond * */ function ___pause(ms) { var date = new Date(); curDate = null; do { var curDate = new Date(); } while ( curDate - date < ms); }; // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once return this.unbind('click').click(_initialize); }; })(jQuery); // Call and execute the function immediately passing the jQuery object /* * jQuery Cycle Plugin (with Transition Definitions) * Examples and documentation at: http://malsup.com/jquery/cycle/ * Copyright (c) 2007-2008 M. Alsup * Version: 2.30 (02-NOV-2008) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * Requires: jQuery v1.2.3 or later * * Based on the work of: * 1) Matt Oakes (http://portfolio.gizone.co.uk/applications/slideshow/) * 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/) * 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/) */ ;(function($) { var ver = '2.30'; var ie6 = $.browser.msie && /MSIE 6.0/.test(navigator.userAgent); function log() { if (window.console && window.console.log) window.console.log('[cycle] ' + Array.prototype.join.call(arguments,'')); }; $.fn.cycle = function(options) { var opt2 = arguments[1]; return this.each(function() { if (options === undefined || options === null) options = {}; if (options.constructor == String) { switch(options) { case 'stop': if (this.cycleTimeout) clearTimeout(this.cycleTimeout); this.cycleTimeout = 0; $(this).data('cycle.opts', ''); return; case 'pause': this.cyclePause = 1; return; case 'resume': this.cyclePause = 0; if (opt2 === true) { // resume now! options = $(this).data('cycle.opts'); if (!options) { log('options not found, can not resume'); return; } if (this.cycleTimeout) { clearTimeout(this.cycleTimeout); this.cycleTimeout = 0; } go(options.elements, options, 1, 1); } return; default: options = { fx: options }; }; } else if (options.constructor == Number) { // go to the requested slide var num = options; options = $(this).data('cycle.opts'); if (!options) { log('options not found, can not advance slide'); return; } if (num < 0 || num >= options.elements.length) { log('invalid slide index: ' + num); return; } options.nextSlide = num; if (this.cycleTimeout) { clearTimeout(this.cycleTimeout); this.cycleTimeout = 0; } go(options.elements, options, 1, num >= options.currSlide); return; } // stop existing slideshow for this container (if there is one) if (this.cycleTimeout) clearTimeout(this.cycleTimeout); this.cycleTimeout = 0; this.cyclePause = 0; var $cont = $(this); var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children(); var els = $slides.get(); if (els.length < 2) { log('terminating; too few slides: ' + els.length); return; // don't bother } // support metadata plugin (v1.0 and v2.0) var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {}); if (opts.autostop) opts.countdown = opts.autostopCount || els.length; $cont.data('cycle.opts', opts); opts.container = this; opts.elements = els; opts.before = opts.before ? [opts.before] : []; opts.after = opts.after ? [opts.after] : []; opts.after.unshift(function(){ opts.busy=0; }); if (opts.continuous) opts.after.push(function() { go(els,opts,0,!opts.rev); }); // clearType corrections if (ie6 && opts.cleartype && !opts.cleartypeNoBg) clearTypeFix($slides); // allow shorthand overrides of width, height and timeout var cls = this.className; opts.width = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width; opts.height = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height; opts.timeout = parseInt((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout; if ($cont.css('position') == 'static') $cont.css('position', 'relative'); if (opts.width) $cont.width(opts.width); if (opts.height && opts.height != 'auto') $cont.height(opts.height); if (opts.startingSlide) opts.startingSlide = parseInt(opts.startingSlide); if (opts.random) { opts.randomMap = []; for (var i = 0; i < els.length; i++) opts.randomMap.push(i); opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;}); opts.randomIndex = 0; opts.startingSlide = opts.randomMap[0]; } else if (opts.startingSlide >= els.length) opts.startingSlide = 0; // catch bogus input var first = opts.startingSlide || 0; $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; $(this).css('z-index', z) }); $(els[first]).css('opacity',1).show(); // opacity bit needed to handle reinit case if ($.browser.msie) els[first].style.removeAttribute('filter'); if (opts.fit && opts.width) $slides.width(opts.width); if (opts.fit && opts.height && opts.height != 'auto') $slides.height(opts.height); if (opts.pause) $cont.hover(function(){this.cyclePause=1;},function(){this.cyclePause=0;}); // run transition init fn var init = $.fn.cycle.transitions[opts.fx]; if ($.isFunction(init)) init($cont, $slides, opts); else if (opts.fx != 'custom') log('unknown transition: ' + opts.fx); $slides.each(function() { var $el = $(this); this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height(); this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width(); }); opts.cssBefore = opts.cssBefore || {}; opts.animIn = opts.animIn || {}; opts.animOut = opts.animOut || {}; $slides.not(':eq('+first+')').css(opts.cssBefore); if (opts.cssFirst) $($slides[first]).css(opts.cssFirst); if (opts.timeout) { opts.timeout = parseInt(opts.timeout); // ensure that timeout and speed settings are sane if (opts.speed.constructor == String) opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed); if (!opts.sync) opts.speed = opts.speed / 2; while((opts.timeout - opts.speed) < 250) opts.timeout += opts.speed; } if (opts.easing) opts.easeIn = opts.easeOut = opts.easing; if (!opts.speedIn) opts.speedIn = opts.speed; if (!opts.speedOut) opts.speedOut = opts.speed; opts.slideCount = els.length; opts.currSlide = first; if (opts.random) { opts.nextSlide = opts.currSlide; if (++opts.randomIndex == els.length) opts.randomIndex = 0; opts.nextSlide = opts.randomMap[opts.randomIndex]; } else opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1; // fire artificial events var e0 = $slides[first]; if (opts.before.length) opts.before[0].apply(e0, [e0, e0, opts, true]); if (opts.after.length > 1) opts.after[1].apply(e0, [e0, e0, opts, true]); if (opts.click && !opts.next) opts.next = opts.click; if (opts.next) $(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)}); if (opts.prev) $(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)}); if (opts.pager) buildPager(els,opts); // expose fn for adding slides after the show has started opts.addSlide = function(newSlide, prepend) { var $s = $(newSlide), s = $s[0]; if (!opts.autostopCount) opts.countdown++; els[prepend?'unshift':'push'](s); if (opts.els) opts.els[prepend?'unshift':'push'](s); // shuffle needs this opts.slideCount = els.length; $s.css('position','absolute'); $s[prepend?'prependTo':'appendTo']($cont); if (prepend) { opts.currSlide++; opts.nextSlide++; } if (ie6 && opts.cleartype && !opts.cleartypeNoBg) clearTypeFix($s); if (opts.fit && opts.width) $s.width(opts.width); if (opts.fit && opts.height && opts.height != 'auto') $slides.height(opts.height); s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height(); s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width(); $s.css(opts.cssBefore); if (opts.pager) $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts); if (typeof opts.onAddSlide == 'function') opts.onAddSlide($s); }; if (opts.timeout || opts.continuous) this.cycleTimeout = setTimeout( function(){go(els,opts,0,!opts.rev)}, opts.continuous ? 10 : opts.timeout + (opts.delay||0)); }); }; function go(els, opts, manual, fwd) { if (opts.busy) return; var p = opts.container, curr = els[opts.currSlide], next = els[opts.nextSlide]; if (p.cycleTimeout === 0 && !manual) return; if (!manual && !p.cyclePause && ((opts.autostop && (--opts.countdown <= 0)) || (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) { if (opts.end) opts.end(opts); return; } if (manual || !p.cyclePause) { if (opts.before.length) $.each(opts.before, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); var after = function() { if ($.browser.msie && opts.cleartype) this.style.removeAttribute('filter'); $.each(opts.after, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); }; if (opts.nextSlide != opts.currSlide) { opts.busy = 1; if (opts.fxFn) opts.fxFn(curr, next, opts, after, fwd); else if ($.isFunction($.fn.cycle[opts.fx])) $.fn.cycle[opts.fx](curr, next, opts, after); else $.fn.cycle.custom(curr, next, opts, after, manual && opts.fastOnEvent); } if (opts.random) { opts.currSlide = opts.nextSlide; if (++opts.randomIndex == els.length) opts.randomIndex = 0; opts.nextSlide = opts.randomMap[opts.randomIndex]; } else { // sequence var roll = (opts.nextSlide + 1) == els.length; opts.nextSlide = roll ? 0 : opts.nextSlide+1; opts.currSlide = roll ? els.length-1 : opts.nextSlide-1; } if (opts.pager) $.fn.cycle.updateActivePagerLink(opts.pager, opts.currSlide); } if (opts.timeout && !opts.continuous) p.cycleTimeout = setTimeout(function() { go(els,opts,0,!opts.rev) }, opts.timeout); else if (opts.continuous && p.cyclePause) p.cycleTimeout = setTimeout(function() { go(els,opts,0,!opts.rev) }, 10); }; $.fn.cycle.updateActivePagerLink = function(pager, currSlide) { $(pager).find('a').removeClass('activeSlide').filter('a:eq('+currSlide+')').addClass('activeSlide'); }; // advance slide forward or back function advance(els, opts, val) { var p = opts.container, timeout = p.cycleTimeout; if (timeout) { clearTimeout(timeout); p.cycleTimeout = 0; } if (opts.random && val < 0) { // move back to the previously display slide opts.randomIndex--; if (--opts.randomIndex == -2) opts.randomIndex = els.length-2; else if (opts.randomIndex == -1) opts.randomIndex = els.length-1; opts.nextSlide = opts.randomMap[opts.randomIndex]; } else if (opts.random) { if (++opts.randomIndex == els.length) opts.randomIndex = 0; opts.nextSlide = opts.randomMap[opts.randomIndex]; } else { opts.nextSlide = opts.currSlide + val; if (opts.nextSlide < 0) { if (opts.nowrap) return false; opts.nextSlide = els.length - 1; } else if (opts.nextSlide >= els.length) { if (opts.nowrap) return false; opts.nextSlide = 0; } } if (opts.prevNextClick && typeof opts.prevNextClick == 'function') opts.prevNextClick(val > 0, opts.nextSlide, els[opts.nextSlide]); go(els, opts, 1, val>=0); return false; }; function buildPager(els, opts) { var $p = $(opts.pager); $.each(els, function(i,o) { $.fn.cycle.createPagerAnchor(i,o,$p,els,opts); }); $.fn.cycle.updateActivePagerLink(opts.pager, opts.startingSlide); }; $.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) { var $a = (typeof opts.pagerAnchorBuilder == 'function') ? $(opts.pagerAnchorBuilder(i,el)) : $(''+(i+1)+''); // don't reparent if anchor is in the dom if ($a.parents('body').length == 0) $a.appendTo($p); $a.bind(opts.pagerEvent, function() { opts.nextSlide = i; var p = opts.container, timeout = p.cycleTimeout; if (timeout) { clearTimeout(timeout); p.cycleTimeout = 0; } if (typeof opts.pagerClick == 'function') opts.pagerClick(opts.nextSlide, els[opts.nextSlide]); go(els,opts,1,opts.currSlide < i); return false; }); if (opts.pauseOnPagerHover) $a.hover(function() { opts.container.cyclePause = 1; }, function() { opts.container.cyclePause = 0; } ); }; // this fixes clearType problems in ie6 by setting an explicit bg color function clearTypeFix($slides) { function hex(s) { var s = parseInt(s).toString(16); return s.length < 2 ? '0'+s : s; }; function getBg(e) { for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) { var v = $.css(e,'background-color'); if (v.indexOf('rgb') >= 0 ) { var rgb = v.match(/\d+/g); return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); } if (v && v != 'transparent') return v; } return '#ffffff'; }; $slides.each(function() { $(this).css('background-color', getBg(this)); }); }; $.fn.cycle.custom = function(curr, next, opts, cb, immediate) { var $l = $(curr), $n = $(next); $n.css(opts.cssBefore); var speedIn = immediate ? 1 : opts.speedIn; var speedOut = immediate ? 1 : opts.speedOut; var easeIn = immediate ? null : opts.easeIn; var easeOut = immediate ? null : opts.easeOut; var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)}; $l.animate(opts.animOut, speedOut, easeOut, function() { if (opts.cssAfter) $l.css(opts.cssAfter); if (!opts.sync) fn(); }); if (opts.sync) fn(); }; $.fn.cycle.transitions = { fade: function($cont, $slides, opts) { $slides.not(':eq('+opts.startingSlide+')').css('opacity',0); opts.before.push(function() { $(this).show() }); opts.animIn = { opacity: 1 }; opts.animOut = { opacity: 0 }; opts.cssBefore = { opacity: 0 }; opts.cssAfter = { display: 'none' }; opts.onAddSlide = function($s) { $s.hide(); }; } }; $.fn.cycle.ver = function() { return ver; }; // override these globally if you like (they are all optional) $.fn.cycle.defaults = { fx: 'fade', // one of: fade, shuffle, zoom, scrollLeft, etc timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance) continuous: 0, // true to start next transition immediately after current one completes speed: 1000, // speed of the transition (any valid fx speed value) speedIn: null, // speed of the 'in' transition speedOut: null, // speed of the 'out' transition next: null, // id of element to use as click trigger for next slide prev: null, // id of element to use as click trigger for previous slide prevNextClick: null, // callback fn for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement) pager: null, // id of element to use as pager container pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement) pagerEvent: 'click', // event which drives the pager navigation pagerAnchorBuilder: null, // callback fn for building anchor links before: null, // transition callback (scope set to element to be shown) after: null, // transition callback (scope set to element that was shown) end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options) easing: null, // easing method for both in and out transitions easeIn: null, // easing for "in" transition easeOut: null, // easing for "out" transition shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 } animIn: null, // properties that define how the slide animates in animOut: null, // properties that define how the slide animates out cssBefore: null, // properties that define the initial state of the slide before transitioning in cssAfter: null, // properties that defined the state of the slide after transitioning out fxFn: null, // function used to control the transition height: 'auto', // container height startingSlide: 0, // zero-based index of the first slide to be displayed sync: 1, // true if in/out transitions should occur simultaneously random: 0, // true for random, false for sequence (not applicable to shuffle fx) fit: 0, // force slides to fit container pause: 0, // true to enable "pause on hover" pauseOnPagerHover: 0, // true to pause when hovering over pager link autostop: 0, // true to end slideshow after X transitions (where X == slide count) autostopCount: 0, // number of transitions (optionally used with autostop to define X) delay: 0, // additional delay (in ms) for first transition (hint: can be negative) slideExpr: null, // expression for selecting slides (if something other than all children is required) cleartype: 0, // true if clearType corrections should be applied (for IE) nowrap: 0, // true to prevent slideshow from wrapping fastOnEvent: 0 // force immediate transition when triggered manually (via pager or prev/next) }; })(jQuery); /* * jQuery Cycle Plugin Transition Definitions * This script is a plugin for the jQuery Cycle Plugin * Examples and documentation at: http://malsup.com/jquery/cycle/ * Copyright (c) 2007-2008 M. Alsup * Version: 2.22 * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ (function($) { // // These functions define one-time slide initialization for the named // transitions. To save file size feel free to remove any of these that you // don't need. // // scrollUp/Down/Left/Right $.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.top = next.offsetHeight; opts.animOut.top = 0-curr.offsetHeight; }); opts.cssFirst = { top: 0 }; opts.animIn = { top: 0 }; opts.cssAfter = { display: 'none' }; }; $.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.top = 0-next.offsetHeight; opts.animOut.top = curr.offsetHeight; }); opts.cssFirst = { top: 0 }; opts.animIn = { top: 0 }; opts.cssAfter = { display: 'none' }; }; $.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.left = next.offsetWidth; opts.animOut.left = 0-curr.offsetWidth; }); opts.cssFirst = { left: 0 }; opts.animIn = { left: 0 }; }; $.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.left = 0-next.offsetWidth; opts.animOut.left = curr.offsetWidth; }); opts.cssFirst = { left: 0 }; opts.animIn = { left: 0 }; }; $.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) { $cont.css('overflow','hidden').width(); // $slides.show(); opts.before.push(function(curr, next, opts, fwd) { $(this).show(); var currW = curr.offsetWidth, nextW = next.offsetWidth; opts.cssBefore = fwd ? { left: nextW } : { left: -nextW }; opts.animIn.left = 0; opts.animOut.left = fwd ? -currW : currW; $slides.not(curr).css(opts.cssBefore); }); opts.cssFirst = { left: 0 }; opts.cssAfter = { display: 'none' } }; $.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) { $cont.css('overflow','hidden'); // $slides.show(); opts.before.push(function(curr, next, opts, fwd) { $(this).show(); var currH = curr.offsetHeight, nextH = next.offsetHeight; opts.cssBefore = fwd ? { top: -nextH } : { top: nextH }; opts.animIn.top = 0; opts.animOut.top = fwd ? currH : -currH; $slides.not(curr).css(opts.cssBefore); }); opts.cssFirst = { top: 0 }; opts.cssAfter = { display: 'none' } }; // slideX/slideY $.fn.cycle.transitions.slideX = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssBefore = { zIndex: 2 }; opts.animIn = { width: 'show' }; opts.animOut = { width: 'hide' }; }; $.fn.cycle.transitions.slideY = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssBefore = { zIndex: 2 }; opts.animIn = { height: 'show' }; opts.animOut = { height: 'hide' }; }; // shuffle $.fn.cycle.transitions.shuffle = function($cont, $slides, opts) { var w = $cont.css('overflow', 'visible').width(); $slides.css({left: 0, top: 0}); opts.before.push(function() { $(this).show() }); opts.speed = opts.speed / 2; // shuffle has 2 transitions opts.random = 0; opts.shuffle = opts.shuffle || {left:-w, top:15}; opts.els = []; for (var i=0; i < $slides.length; i++) opts.els.push($slides[i]); for (var i=0; i < opts.startingSlide; i++) opts.els.push(opts.els.shift()); // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!) opts.fxFn = function(curr, next, opts, cb, fwd) { var $el = fwd ? $(curr) : $(next); $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() { fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop()); if (fwd) for (var i=0, len=opts.els.length; i < len; i++) $(opts.els[i]).css('z-index', len-i); else { var z = $(curr).css('z-index'); $el.css('z-index', parseInt(z)+1); } $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() { $(fwd ? this : curr).hide(); if (cb) cb(); }); }); }; opts.onAddSlide = function($s) { $s.hide(); }; }; // turnUp/Down/Left/Right $.fn.cycle.transitions.turnUp = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.top = next.cycleH; opts.animIn.height = next.cycleH; }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssFirst = { top: 0 }; opts.cssBefore = { height: 0 }; opts.animIn = { top: 0 }; opts.animOut = { height: 0 }; opts.cssAfter = { display: 'none' }; }; $.fn.cycle.transitions.turnDown = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(this).show(); opts.animIn.height = next.cycleH; opts.animOut.top = curr.cycleH; }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssFirst = { top: 0 }; opts.cssBefore = { top: 0, height: 0 }; opts.animOut = { height: 0 }; opts.cssAfter = { display: 'none' }; }; $.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore.left = next.cycleW; opts.animIn.width = next.cycleW; }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssBefore = { width: 0 }; opts.animIn = { left: 0 }; opts.animOut = { width: 0 }; opts.cssAfter = { display: 'none' }; }; $.fn.cycle.transitions.turnRight = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { $(this).show(); opts.animIn.width = next.cycleW; opts.animOut.left = curr.cycleW; }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssBefore = { left: 0, width: 0 }; opts.animIn = { left: 0 }; opts.animOut = { width: 0 }; opts.cssAfter = { display: 'none' }; }; // zoom $.fn.cycle.transitions.zoom = function($cont, $slides, opts) { opts.cssFirst = { top:0, left: 0 }; opts.cssAfter = { display: 'none' }; opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssBefore = { width: 0, height: 0, top: next.cycleH/2, left: next.cycleW/2 }; opts.cssAfter = { display: 'none' }; opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH }; opts.animOut = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 }; $(curr).css('zIndex',2); $(next).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide(); }; }; // fadeZoom $.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { opts.cssBefore = { width: 0, height: 0, opacity: 1, left: next.cycleW/2, top: next.cycleH/2, zIndex: 1 }; opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH }; }); opts.animOut = { opacity: 0 }; opts.cssAfter = { zIndex: 0 }; }; // blindX $.fn.cycle.transitions.blindX = function($cont, $slides, opts) { var w = $cont.css('overflow','hidden').width(); $slides.show(); opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',1); }); opts.cssBefore = { left: w, zIndex: 2 }; opts.cssAfter = { zIndex: 1 }; opts.animIn = { left: 0 }; opts.animOut = { left: w }; }; // blindY $.fn.cycle.transitions.blindY = function($cont, $slides, opts) { var h = $cont.css('overflow','hidden').height(); $slides.show(); opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',1); }); opts.cssBefore = { top: h, zIndex: 2 }; opts.cssAfter = { zIndex: 1 }; opts.animIn = { top: 0 }; opts.animOut = { top: h }; }; // blindZ $.fn.cycle.transitions.blindZ = function($cont, $slides, opts) { var h = $cont.css('overflow','hidden').height(); var w = $cont.width(); $slides.show(); opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',1); }); opts.cssBefore = { top: h, left: w, zIndex: 2 }; opts.cssAfter = { zIndex: 1 }; opts.animIn = { top: 0, left: 0 }; opts.animOut = { top: h, left: w }; }; // growX - grow horizontally from centered 0 width $.fn.cycle.transitions.growX = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { opts.cssBefore = { left: this.cycleW/2, width: 0, zIndex: 2 }; opts.animIn = { left: 0, width: this.cycleW }; opts.animOut = { left: 0 }; $(curr).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide().css('zIndex',1); }; }; // growY - grow vertically from centered 0 height $.fn.cycle.transitions.growY = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { opts.cssBefore = { top: this.cycleH/2, height: 0, zIndex: 2 }; opts.animIn = { top: 0, height: this.cycleH }; opts.animOut = { top: 0 }; $(curr).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide().css('zIndex',1); }; }; // curtainX - squeeze in both edges horizontally $.fn.cycle.transitions.curtainX = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { opts.cssBefore = { left: next.cycleW/2, width: 0, zIndex: 1, display: 'block' }; opts.animIn = { left: 0, width: this.cycleW }; opts.animOut = { left: curr.cycleW/2, width: 0 }; $(curr).css('zIndex',2); }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssAfter = { zIndex: 1, display: 'none' }; }; // curtainY - squeeze in both edges vertically $.fn.cycle.transitions.curtainY = function($cont, $slides, opts) { opts.before.push(function(curr, next, opts) { opts.cssBefore = { top: next.cycleH/2, height: 0, zIndex: 1, display: 'block' }; opts.animIn = { top: 0, height: this.cycleH }; opts.animOut = { top: curr.cycleH/2, height: 0 }; $(curr).css('zIndex',2); }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssAfter = { zIndex: 1, display: 'none' }; }; // cover - curr slide covered by next slide $.fn.cycle.transitions.cover = function($cont, $slides, opts) { var d = opts.direction || 'left'; var w = $cont.css('overflow','hidden').width(); var h = $cont.height(); opts.before.push(function(curr, next, opts) { opts.cssBefore = opts.cssBefore || {}; opts.cssBefore.zIndex = 2; opts.cssBefore.display = 'block'; if (d == 'right') opts.cssBefore.left = -w; else if (d == 'up') opts.cssBefore.top = h; else if (d == 'down') opts.cssBefore.top = -h; else opts.cssBefore.left = w; $(curr).css('zIndex',1); }); if (!opts.animIn) opts.animIn = { left: 0, top: 0 }; if (!opts.animOut) opts.animOut = { left: 0, top: 0 }; opts.cssAfter = opts.cssAfter || {}; opts.cssAfter.zIndex = 2; opts.cssAfter.display = 'none'; }; // uncover - curr slide moves off next slide $.fn.cycle.transitions.uncover = function($cont, $slides, opts) { var d = opts.direction || 'left'; var w = $cont.css('overflow','hidden').width(); var h = $cont.height(); opts.before.push(function(curr, next, opts) { opts.cssBefore.display = 'block'; if (d == 'right') opts.animOut.left = w; else if (d == 'up') opts.animOut.top = -h; else if (d == 'down') opts.animOut.top = h; else opts.animOut.left = -w; $(curr).css('zIndex',2); $(next).css('zIndex',1); }); opts.onAddSlide = function($s) { $s.hide(); }; if (!opts.animIn) opts.animIn = { left: 0, top: 0 }; opts.cssBefore = opts.cssBefore || {}; opts.cssBefore.top = 0; opts.cssBefore.left = 0; opts.cssAfter = opts.cssAfter || {}; opts.cssAfter.zIndex = 1; opts.cssAfter.display = 'none'; }; // toss - move top slide and fade away $.fn.cycle.transitions.toss = function($cont, $slides, opts) { var w = $cont.css('overflow','visible').width(); var h = $cont.height(); opts.before.push(function(curr, next, opts) { $(curr).css('zIndex',2); opts.cssBefore.display = 'block'; // provide default toss settings if animOut not provided if (!opts.animOut.left && !opts.animOut.top) opts.animOut = { left: w*2, top: -h/2, opacity: 0 }; else opts.animOut.opacity = 0; }); opts.onAddSlide = function($s) { $s.hide(); }; opts.cssBefore = { left: 0, top: 0, zIndex: 1, opacity: 1 }; opts.animIn = { left: 0 }; opts.cssAfter = { zIndex: 2, display: 'none' }; }; // wipe - clip animation $.fn.cycle.transitions.wipe = function($cont, $slides, opts) { var w = $cont.css('overflow','hidden').width(); var h = $cont.height(); opts.cssBefore = opts.cssBefore || {}; var clip; if (opts.clip) { if (/l2r/.test(opts.clip)) clip = 'rect(0px 0px '+h+'px 0px)'; else if (/r2l/.test(opts.clip)) clip = 'rect(0px '+w+'px '+h+'px '+w+'px)'; else if (/t2b/.test(opts.clip)) clip = 'rect(0px '+w+'px 0px 0px)'; else if (/b2t/.test(opts.clip)) clip = 'rect('+h+'px '+w+'px '+h+'px 0px)'; else if (/zoom/.test(opts.clip)) { var t = parseInt(h/2); var l = parseInt(w/2); clip = 'rect('+t+'px '+l+'px '+t+'px '+l+'px)'; } } opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)'; var d = opts.cssBefore.clip.match(/(\d+)/g); var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]); opts.before.push(function(curr, next, opts) { if (curr == next) return; var $curr = $(curr).css('zIndex',2); var $next = $(next).css({ zIndex: 3, display: 'block' }); var step = 1, count = parseInt((opts.speedIn / 13)) - 1; function f() { var tt = t ? t - parseInt(step * (t/count)) : 0; var ll = l ? l - parseInt(step * (l/count)) : 0; var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h; var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w; $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' }); (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none'); } f(); }); opts.cssAfter = { }; opts.animIn = { left: 0 }; opts.animOut = { left: 0 }; }; })(jQuery);