/* ------------------------------------------------------------------------ Class: prettyPhoto Use: Lightbox clone for jQuery Author: Stephane Caron (http://www.no-margin-for-errors.com) Version: 2.5.4 ------------------------------------------------------------------------- */ (function($) { $.prettyPhoto = {version: '2.5.4'}; $.fn.prettyPhoto = function(settings) { settings = jQuery.extend({ animationSpeed: 'normal', /* fast/slow/normal */ padding: 40, /* padding for each side of the picture */ opacity: 0.80, /* Value between 0 and 1 */ showTitle: true, /* true/false */ allowresize: true, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */ hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */ modal: false, /* If set to true, only the close button will close the window */ changepicturecallback: function(){}, /* Called everytime an item is shown/changed */ callback: function(){} /* Called when prettyPhoto is closed */ }, settings); if($('.pp_overlay').size() == 0) { _buildOverlay(); // If the overlay is not there, inject it! }else{ // Set my global selectors $pp_pic_holder = $('.pp_pic_holder'); $ppt = $('.ppt'); } // Global variables accessible only by prettyPhoto var doresize = true, percentBased = false, correctSizes, // Cached selectors $pp_pic_holder, $ppt, // prettyPhoto container specific pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth, pp_type = 'image', //Gallery specific setPosition = 0, // Global elements $scrollPos = _getScroll(); // Window/Keyboard events $(window).scroll(function(){ $scrollPos = _getScroll(); _centerOverlay(); _resizeOverlay(); }); $(window).resize(function(){ _centerOverlay(); _resizeOverlay(); }); $(document).keydown(function(e){ if($pp_pic_holder.is(':visible')) switch(e.keyCode){ case 37: $.prettyPhoto.changePage('previous'); break; case 39: $.prettyPhoto.changePage('next'); break; case 27: if(!settings.modal) $.prettyPhoto.close(); break; }; }); // Bind the code to each links $(this).each(function(){ $(this).bind('click',function(){ link = this; // Fix scoping // Find out if the picture is part of a set theRel = $(this).attr('rel'); galleryRegExp = /\[(?:.*)\]/; theGallery = galleryRegExp.exec(theRel); // Build the gallery array var images = new Array(), titles = new Array(), descriptions = new Array(); if(theGallery){ $('a[rel*='+theGallery+']').each(function(i){ if($(this)[0] === $(link)[0]) setPosition = i; // Get the position in the set images.push($(this).attr('href')); titles.push($(this).find('img').attr('alt')); descriptions.push($(this).attr('title')); }); }else{ images = $(this).attr('href'); titles = ($(this).find('img').attr('alt')) ? $(this).find('img').attr('alt') : ''; descriptions = ($(this).attr('title')) ? $(this).attr('title') : ''; } $.prettyPhoto.open(images,titles,descriptions); return false; }); }); /** * Opens the prettyPhoto modal box. * @param image {String,Array} Full path to the image to be open, can also be an array containing full images paths. * @param title {String,Array} The title to be displayed with the picture, can also be an array containing all the titles. * @param description {String,Array} The description to be displayed with the picture, can also be an array containing all the descriptions. */ $.prettyPhoto.open = function(gallery_images,gallery_titles,gallery_descriptions) { // To fix the bug with IE select boxes if($.browser.msie && $.browser.version == 6){ $('select').css('visibility','hidden'); }; // Hide the flash if(settings.hideflash) $('object,embed').css('visibility','hidden'); // Convert everything to an array in the case it's a single item images = $.makeArray(gallery_images); titles = $.makeArray(gallery_titles); descriptions = $.makeArray(gallery_descriptions); if($('.pp_overlay').size() == 0) { _buildOverlay(); // If the overlay is not there, inject it! }else{ // Set my global selectors $pp_pic_holder = $('.pp_pic_holder'); $ppt = $('.ppt'); } $pp_pic_holder.attr('class','pp_pic_holder ' + settings.theme); // Set the proper theme isSet = ($(images).size() > 0) ? true : false; // Find out if it's a set _getFileType(images[setPosition]); // Set the proper file type _centerOverlay(); // Center it // Hide the next/previous links if on first or last images. _checkPosition($(images).size()); $('.pp_loaderIcon').show(); // Do I need to explain? // Fade the content in $('div.pp_overlay').show().fadeTo(settings.animationSpeed,settings.opacity, function(){ $pp_pic_holder.fadeIn(settings.animationSpeed,function(){ // Display the current position $pp_pic_holder.find('p.currentTextHolder').text((setPosition+1) + settings.counter_separator_label + $(images).size()); // Set the description if(descriptions[setPosition]){ $pp_pic_holder.find('.pp_description').show().html(unescape(descriptions[setPosition])); }else{ $pp_pic_holder.find('.pp_description').hide().text(''); }; // Set the title if(titles[setPosition] && settings.showTitle){ hasTitle = true; $ppt.html(unescape(titles[setPosition])); }else{ hasTitle = false; }; // Inject the proper content if(pp_type == 'image'){ // Set the new image imgPreloader = new Image(); // Preload the neighbour images nextImage = new Image(); if(isSet && setPosition > $(images).size()) nextImage.src = images[setPosition + 1]; prevImage = new Image(); if(isSet && images[setPosition - 1]) prevImage.src = images[setPosition - 1]; pp_typeMarkup = ''; $pp_pic_holder.find('#pp_full_res')[0].innerHTML = pp_typeMarkup; $pp_pic_holder.find('.pp_content').css('overflow','hidden'); $pp_pic_holder.find('#fullResImage').attr('src',images[setPosition]); imgPreloader.onload = function(){ // Fit item to viewport correctSizes = _fitToViewport(imgPreloader.width,imgPreloader.height); _showContent(); }; imgPreloader.src = images[setPosition]; }else{ // Get the dimensions movie_width = ( parseFloat(grab_param('width',images[setPosition])) ) ? grab_param('width',images[setPosition]) : "425"; movie_height = ( parseFloat(grab_param('height',images[setPosition])) ) ? grab_param('height',images[setPosition]) : "344"; // If the size is % based, calculate according to window dimensions if(movie_width.indexOf('%') != -1 || movie_height.indexOf('%') != -1){ movie_height = ($(window).height() * parseFloat(movie_height) / 100) - 100; movie_width = ($(window).width() * parseFloat(movie_width) / 100) - 100; percentBased = true; } movie_height = parseFloat(movie_height); movie_width = parseFloat(movie_width); if(pp_type == 'quicktime') movie_height+=15; // Add space for the control bar // Fit item to viewport correctSizes = _fitToViewport(movie_width,movie_height); if(pp_type == 'youtube'){ pp_typeMarkup = ''; }else if(pp_type == 'quicktime'){ pp_typeMarkup = ''; }else if(pp_type == 'flash'){ flash_vars = images[setPosition]; flash_vars = flash_vars.substring(images[setPosition].indexOf('flashvars') + 10,images[setPosition].length); filename = images[setPosition]; filename = filename.substring(0,filename.indexOf('?')); pp_typeMarkup = ''; }else if(pp_type == 'iframe'){ movie_url = images[setPosition]; movie_url = movie_url.substr(0,movie_url.indexOf('iframe')-1); pp_typeMarkup = ''; } // Show content _showContent(); } }); }); }; /** * Change page in the prettyPhoto modal box * @param direction {String} Direction of the paging, previous or next. */ $.prettyPhoto.changePage = function(direction){ if(direction == 'previous') { setPosition--; if (setPosition < 0){ setPosition = 0; return; } }else{ if($('.pp_arrow_next').is('.disabled')) return; setPosition++; }; // Allow the resizing of the images if(!doresize) doresize = true; _hideContent(); $('a.pp_expand,a.pp_contract').fadeOut(settings.animationSpeed,function(){ $(this).removeClass('pp_contract').addClass('pp_expand'); $.prettyPhoto.open(images,titles,descriptions); }); }; /** * Closes the prettyPhoto modal box. */ $.prettyPhoto.close = function(){ $pp_pic_holder.find('object,embed').css('visibility','hidden'); $('div.pp_pic_holder,div.ppt').fadeOut(settings.animationSpeed); $('div.pp_overlay').fadeOut(settings.animationSpeed, function(){ $('div.pp_overlay,div.pp_pic_holder,div.ppt').remove(); // To fix the bug with IE select boxes if($.browser.msie && $.browser.version == 6){ $('select').css('visibility','visible'); }; // Show the flash if(settings.hideflash) $('object,embed').css('visibility','visible'); setPosition = 0; settings.callback(); }); doresize = true; }; /** * Set the proper sizes on the containers and animate the content in. */ _showContent = function(){ $('.pp_loaderIcon').hide(); if($.browser.opera) { windowHeight = window.innerHeight; windowWidth = window.innerWidth; }else{ windowHeight = $(window).height(); windowWidth = $(window).width(); }; // Calculate the opened top position of the pic holder projectedTop = $scrollPos['scrollTop'] + ((windowHeight/2) - (correctSizes['containerHeight']/2)); if(projectedTop < 0) projectedTop = 0 + $pp_pic_holder.find('.ppt').height(); // Resize the content holder $pp_pic_holder.find('.pp_content').animate({'height':correctSizes['contentHeight']},settings.animationSpeed); // Resize picture the holder $pp_pic_holder.animate({ 'top': projectedTop, 'left': ((windowWidth/2) - (correctSizes['containerWidth']/2)), 'width': correctSizes['containerWidth'] },settings.animationSpeed,function(){ $pp_pic_holder.width(correctSizes['containerWidth']); $pp_pic_holder.find('.pp_hoverContainer,#fullResImage').height(correctSizes['height']).width(correctSizes['width']); // Fade the new image $pp_pic_holder.find('#pp_full_res').fadeIn(settings.animationSpeed); // Show the nav if(isSet && pp_type=="image") { $pp_pic_holder.find('.pp_hoverContainer').fadeIn(settings.animationSpeed); }else{ $pp_pic_holder.find('.pp_hoverContainer').hide(); } $pp_pic_holder.find('.pp_details').fadeIn(settings.animationSpeed); // Show the title if(settings.showTitle && hasTitle){ $ppt.css({ 'top' : $pp_pic_holder.offset().top - 20, 'left' : $pp_pic_holder.offset().left + (settings.padding/2), 'display' : 'none' }); $ppt.fadeIn(settings.animationSpeed); }; // Fade the resizing link if the image is resized if(correctSizes['resized']) $('a.pp_expand,a.pp_contract').fadeIn(settings.animationSpeed); // Once everything is done, inject the content if it's now a photo if(pp_type != 'image') $pp_pic_holder.find('#pp_full_res')[0].innerHTML = pp_typeMarkup; // Callback! settings.changepicturecallback(); }); }; /** * Hide the content...DUH! */ function _hideContent(){ // Fade out the current picture $pp_pic_holder.find('#pp_full_res object,#pp_full_res embed').css('visibility','hidden'); $pp_pic_holder.find('.pp_hoverContainer,.pp_details').fadeOut(settings.animationSpeed); $pp_pic_holder.find('#pp_full_res').fadeOut(settings.animationSpeed,function(){ $('.pp_loaderIcon').show(); }); // Hide the title $ppt.fadeOut(settings.animationSpeed); } /** * Check the item position in the gallery array, hide or show the navigation links * @param setCount {integer} The total number of items in the set */ function _checkPosition(setCount){ // If at the end, hide the next link if(setPosition == setCount-1) { $pp_pic_holder.find('a.pp_next').css('visibility','hidden'); $pp_pic_holder.find('a.pp_arrow_next').addClass('disabled').unbind('click'); }else{ $pp_pic_holder.find('a.pp_next').css('visibility','visible'); $pp_pic_holder.find('a.pp_arrow_next.disabled').removeClass('disabled').bind('click',function(){ $.prettyPhoto.changePage('next'); return false; }); }; // If at the beginning, hide the previous link if(setPosition == 0) { $pp_pic_holder.find('a.pp_previous').css('visibility','hidden'); $pp_pic_holder.find('a.pp_arrow_previous').addClass('disabled').unbind('click'); }else{ $pp_pic_holder.find('a.pp_previous').css('visibility','visible'); $pp_pic_holder.find('a.pp_arrow_previous.disabled').removeClass('disabled').bind('click',function(){ $.prettyPhoto.changePage('previous'); return false; }); }; // Hide the bottom nav if it's not a set. if(setCount > 1) { $('.pp_nav').show(); }else{ $('.pp_nav').hide(); } }; /** * Resize the item dimensions if it's bigger than the viewport * @param width {integer} Width of the item to be opened * @param height {integer} Height of the item to be opened * @return An array containin the "fitted" dimensions */ function _fitToViewport(width,height){ hasBeenResized = false; _getDimensions(width,height); // Define them in case there's no resize needed imageWidth = width; imageHeight = height; windowHeight = $(window).height(); windowWidth = $(window).width(); if( ((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)) && doresize && settings.allowresize && !percentBased) { hasBeenResized = true; notFitting = true; while (notFitting){ if((pp_containerWidth > windowWidth)){ imageWidth = (windowWidth - 200); imageHeight = (height/width) * imageWidth; }else if((pp_containerHeight > windowHeight)){ imageHeight = (windowHeight - 200); imageWidth = (width/height) * imageHeight; }else{ notFitting = false; }; pp_containerHeight = imageHeight; pp_containerWidth = imageWidth; }; _getDimensions(imageWidth,imageHeight); }; return { width:imageWidth, height:imageHeight, containerHeight:pp_containerHeight, containerWidth:pp_containerWidth, contentHeight:pp_contentHeight, contentWidth:pp_contentWidth, resized:hasBeenResized }; }; /** * Get the containers dimensions according to the item size * @param width {integer} Width of the item to be opened * @param height {integer} Height of the item to be opened */ function _getDimensions(width,height){ $pp_pic_holder.find('.pp_details').width(width).find('.pp_description').width(width - parseFloat($pp_pic_holder.find('a.pp_close').css('width'))); /* To have the correct height */ // Get the container size, to resize the holder to the right dimensions pp_contentHeight = height + $pp_pic_holder.find('.pp_details').height() + parseFloat($pp_pic_holder.find('.pp_details').css('marginTop')) + parseFloat($pp_pic_holder.find('.pp_details').css('marginBottom')); pp_contentWidth = width; pp_containerHeight = pp_contentHeight + $pp_pic_holder.find('.ppt').height() + $pp_pic_holder.find('.pp_top').height() + $pp_pic_holder.find('.pp_bottom').height(); pp_containerWidth = width + settings.padding; } function _getFileType(itemSrc){ if (itemSrc.match(/youtube\.com\/watch/i)) { pp_type = 'youtube'; }else if(itemSrc.indexOf('.mov') != -1){ pp_type = 'quicktime'; }else if(itemSrc.indexOf('.swf') != -1){ pp_type = 'flash'; }else if(itemSrc.indexOf('iframe') != -1){ pp_type = 'iframe' }else{ pp_type = 'image'; }; }; function _centerOverlay(){ if($.browser.opera) { windowHeight = window.innerHeight; windowWidth = window.innerWidth; }else{ windowHeight = $(window).height(); windowWidth = $(window).width(); }; if(doresize) { $pHeight = $pp_pic_holder.height(); $pWidth = $pp_pic_holder.width(); $tHeight = $ppt.height(); projectedTop = (windowHeight/2) + $scrollPos['scrollTop'] - ($pHeight/2); if(projectedTop < 0) projectedTop = 0 + $tHeight; $pp_pic_holder.css({ 'top': projectedTop, 'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) }); $ppt.css({ 'top' : projectedTop - $tHeight, 'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2) }); }; }; function _getScroll(){ if (self.pageYOffset) { scrollTop = self.pageYOffset; scrollLeft = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict scrollTop = document.documentElement.scrollTop; scrollLeft = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers scrollTop = document.body.scrollTop; scrollLeft = document.body.scrollLeft; } return {scrollTop:scrollTop,scrollLeft:scrollLeft}; }; function _resizeOverlay() { $('div.pp_overlay').css({ 'height':$(document).height(), 'width':$(window).width() }); }; function _buildOverlay(){ toInject = ""; // Build the background overlay div toInject += "
"; // Basic HTML for the picture holder toInject += '
Expand
nextprevious
Close

Previous

0'+settings.counter_separator_label+'0

Next
'; // Basic html for the title holder toInject += '
'; $('body').append(toInject); // So it fades nicely $('div.pp_overlay').css('opacity',0); // Set my global selectors $pp_pic_holder = $('.pp_pic_holder'); $ppt = $('.ppt'); $('div.pp_overlay').css('height',$(document).height()).hide().bind('click',function(){ if(!settings.modal) $.prettyPhoto.close(); }); $('a.pp_close').bind('click',function(){ $.prettyPhoto.close(); return false; }); $('a.pp_expand').bind('click',function(){ $this = $(this); // Fix scoping // Expand the image if($this.hasClass('pp_expand')){ $this.removeClass('pp_expand').addClass('pp_contract'); doresize = false; }else{ $this.removeClass('pp_contract').addClass('pp_expand'); doresize = true; }; _hideContent(); $pp_pic_holder.find('.pp_hoverContainer, .pp_details').fadeOut(settings.animationSpeed); $pp_pic_holder.find('#pp_full_res').fadeOut(settings.animationSpeed,function(){ $.prettyPhoto.open(images,titles,descriptions); }); return false; }); $pp_pic_holder.find('.pp_previous, .pp_arrow_previous').bind('click',function(){ $.prettyPhoto.changePage('previous'); return false; }); $pp_pic_holder.find('.pp_next, .pp_arrow_next').bind('click',function(){ $.prettyPhoto.changePage('next'); return false; }); $pp_pic_holder.find('.pp_hoverContainer').css({ 'margin-left': settings.padding/2 }); }; }; function grab_param(name,url){ name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( url ); if( results == null ) return ""; else return results[1]; } })(jQuery); $(document).ready(function(){ $(".text a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'}); }); $(document).ready(function(){ $("#menu a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'}); }); $(document).ready(function(){ $(".mult a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded'}); }); /* * jQuery Cycle Plugin (with Transition Definitions) * Examples and documentation at: http://jquery.malsup.com/cycle/ * Copyright (c) 2007-2009 M. Alsup * Version: 2.37 (12-FEB-2009) */ ;(function(F){var A="2.37";if(F.support==undefined){F.support={opacity:!(F.browser.msie&&/MSIE 6.0/.test(navigator.userAgent))}}function C(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments,""))}}F.fn.cycle=function(I){if(this.length==0){C("terminating; zero elements found by selector"+(F.isReady?"":" (DOM not ready)"));return this}var J=arguments[1];return this.each(function(){if(this.cycleStop==undefined){this.cycleStop=0}if(I===undefined||I===null){I={}}if(I.constructor==String){switch(I){case"stop":this.cycleStop++;if(this.cycleTimeout){clearTimeout(this.cycleTimeout)}this.cycleTimeout=0;F(this).removeData("cycle.opts");return ;case"pause":this.cyclePause=1;return ;case"resume":this.cyclePause=0;if(J===true){I=F(this).data("cycle.opts");if(!I){C("options not found, can not resume");return }if(this.cycleTimeout){clearTimeout(this.cycleTimeout);this.cycleTimeout=0}D(I.elements,I,1,1)}return ;default:I={fx:I}}}else{if(I.constructor==Number){var S=I;I=F(this).data("cycle.opts");if(!I){C("options not found, can not advance slide");return }if(S<0||S>=I.elements.length){C("invalid slide index: "+S);return }I.nextSlide=S;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);this.cycleTimeout=0}D(I.elements,I,1,S>=I.currSlide);return }}if(this.cycleTimeout){clearTimeout(this.cycleTimeout)}this.cycleTimeout=0;this.cyclePause=0;var X=F(this);var T=I.slideExpr?F(I.slideExpr,this):X.children();var N=T.get();if(N.length<2){C("terminating; too few slides: "+N.length);return }var K=F.extend({},F.fn.cycle.defaults,I||{},F.metadata?X.metadata():F.meta?X.data():{});if(K.autostop){K.countdown=K.autostopCount||N.length}X.data("cycle.opts",K);K.container=this;K.stopCount=this.cycleStop;K.elements=N;K.before=K.before?[K.before]:[];K.after=K.after?[K.after]:[];K.after.unshift(function(){K.busy=0});if(K.continuous){K.after.push(function(){D(N,K,0,!K.rev)})}if(!F.support.opacity&&K.cleartype&&!K.cleartypeNoBg){B(T)}var Z=this.className;K.width=parseInt((Z.match(/w:(\d+)/)||[])[1])||K.width;K.height=parseInt((Z.match(/h:(\d+)/)||[])[1])||K.height;K.timeout=parseInt((Z.match(/t:(\d+)/)||[])[1])||K.timeout;if(X.css("position")=="static"){X.css("position","relative")}if(K.width){X.width(K.width)}if(K.height&&K.height!="auto"){X.height(K.height)}if(K.startingSlide){K.startingSlide=parseInt(K.startingSlide)}if(K.random){K.randomMap=[];for(var P=0;P=N.length){K.startingSlide=0}}var R=K.startingSlide||0;T.css({position:"absolute",top:0,left:0}).hide().each(function(a){var b=R?a>=R?N.length-(a-R):R-a:N.length-a;F(this).css("z-index",b)});F(N[R]).css("opacity",1).show();if(F.browser.msie){N[R].style.removeAttribute("filter")}if(K.fit&&K.width){T.width(K.width)}if(K.fit&&K.height&&K.height!="auto"){T.height(K.height)}var O=K.containerResize&&!X.innerHeight();if(O){var U=0,M=0;for(var P=0;PU?W:U;M=Q>M?Q:M}X.css({width:U+"px",height:M+"px"})}if(K.pause){X.hover(function(){this.cyclePause++},function(){this.cyclePause--})}var Y=F.fn.cycle.transitions[K.fx];if(F.isFunction(Y)){Y(X,T,K)}else{if(K.fx!="custom"){C("unknown transition: "+K.fx)}}T.each(function(){var a=F(this);this.cycleH=(K.fit&&K.height)?K.height:a.height();this.cycleW=(K.fit&&K.width)?K.width:a.width()});K.cssBefore=K.cssBefore||{};K.animIn=K.animIn||{};K.animOut=K.animOut||{};T.not(":eq("+R+")").css(K.cssBefore);if(K.cssFirst){F(T[R]).css(K.cssFirst)}if(K.timeout){K.timeout=parseInt(K.timeout);if(K.speed.constructor==String){K.speed=F.fx.speeds[K.speed]||parseInt(K.speed)}if(!K.sync){K.speed=K.speed/2}while((K.timeout-K.speed)<250){K.timeout+=K.speed}}if(K.easing){K.easeIn=K.easeOut=K.easing}if(!K.speedIn){K.speedIn=K.speed}if(!K.speedOut){K.speedOut=K.speed}K.slideCount=N.length;K.currSlide=K.lastSlide=R;if(K.random){K.nextSlide=K.currSlide;if(++K.randomIndex==N.length){K.randomIndex=0}K.nextSlide=K.randomMap[K.randomIndex]}else{K.nextSlide=K.startingSlide>=(N.length-1)?0:K.startingSlide+1}var V=T[R];if(K.before.length){K.before[0].apply(V,[V,V,K,true])}if(K.after.length>1){K.after[1].apply(V,[V,V,K,true])}if(K.click&&!K.next){K.next=K.click}if(K.next){F(K.next).bind("click",function(){return E(N,K,K.rev?-1:1)})}if(K.prev){F(K.prev).bind("click",function(){return E(N,K,K.rev?1:-1)})}if(K.pager){H(N,K)}K.addSlide=function(b,c){var a=F(b),d=a[0];if(!K.autostopCount){K.countdown++}N[c?"unshift":"push"](d);if(K.els){K.els[c?"unshift":"push"](d)}K.slideCount=N.length;a.css("position","absolute");a[c?"prependTo":"appendTo"](X);if(c){K.currSlide++;K.nextSlide++}if(!F.support.opacity&&K.cleartype&&!K.cleartypeNoBg){B(a)}if(K.fit&&K.width){a.width(K.width)}if(K.fit&&K.height&&K.height!="auto"){T.height(K.height)}d.cycleH=(K.fit&&K.height)?K.height:a.height();d.cycleW=(K.fit&&K.width)?K.width:a.width();a.css(K.cssBefore);if(K.pager){F.fn.cycle.createPagerAnchor(N.length-1,d,F(K.pager),N,K)}if(typeof K.onAddSlide=="function"){K.onAddSlide(a)}};if(K.timeout||K.continuous){this.cycleTimeout=setTimeout(function(){D(N,K,0,!K.rev)},K.continuous?10:K.timeout+(K.delay||0))}})};function D(N,I,M,O){if(M&&I.busy){F(N).stop(true,true);I.busy=false}if(I.busy){return }var L=I.container,Q=N[I.currSlide],P=N[I.nextSlide];if(L.cycleStop!=I.stopCount||L.cycleTimeout===0&&!M){return }if(!M&&!L.cyclePause&&((I.autostop&&(--I.countdown<=0))||(I.nowrap&&!I.random&&I.nextSlide=I.length){if(J.nowrap){return false}J.nextSlide=0}}}}if(J.prevNextClick&&typeof J.prevNextClick=="function"){J.prevNextClick(M>0,J.nextSlide,I[J.nextSlide])}D(I,J,1,M>=0);return false}function H(J,K){var I=F(K.pager);F.each(J,function(L,M){F.fn.cycle.createPagerAnchor(L,M,I,J,K)});F.fn.cycle.updateActivePagerLink(K.pager,K.startingSlide)}F.fn.cycle.createPagerAnchor=function(L,M,J,K,N){var I=(typeof N.pagerAnchorBuilder=="function")?N.pagerAnchorBuilder(L,M):''+(L+1)+"";if(!I){return }var O=F(I);if(O.parents("body").length==0){O.appendTo(J)}O.bind(N.pagerEvent,function(){N.nextSlide=L;var Q=N.container,P=Q.cycleTimeout;if(P){clearTimeout(P);Q.cycleTimeout=0}if(typeof N.pagerClick=="function"){N.pagerClick(N.nextSlide,K[N.nextSlide])}D(K,N,1,N.currSlideI?M-I:L.slideCount-I}else{J=M=0){var M=L.match(/\d+/g);return"#"+J(M[0])+J(M[1])+J(M[2])}if(L&&L!="transparent"){return L}}return"#ffffff"}K.each(function(){F(this).css("background-color",I(this))})}F.fn.cycle.custom=function(T,N,I,K,J){var S=F(T),O=F(N);O.css(I.cssBefore);var L=I.speedIn;var R=I.speedOut;var M=I.easeIn;var Q=I.easeOut;if(J){if(typeof J=="number"){L=R=J}else{L=R=1}M=Q=null}var P=function(){O.animate(I.animIn,L,M,K)};S.animate(I.animOut,R,Q,function(){if(I.cssAfter){S.css(I.cssAfter)}if(!I.sync){P()}});if(I.sync){P()}};F.fn.cycle.transitions={fade:function(J,K,I){K.not(":eq("+I.startingSlide+")").css("opacity",0);I.before.push(function(){F(this).show()});I.animIn={opacity:1};I.animOut={opacity:0};I.cssBefore={opacity:0};I.cssAfter={display:"none"};I.onAddSlide=function(L){L.hide()}}};F.fn.cycle.ver=function(){return A};F.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:0,nowrap:0,fastOnEvent:0}})(jQuery);(function(A){A.fn.cycle.transitions.scrollUp=function(C,D,B){C.css("overflow","hidden");B.before.push(function(G,E,F){A(this).show();F.cssBefore.top=E.offsetHeight-1;F.animOut.top=0-G.offsetHeight});B.cssFirst={top:0};B.animIn={top:0};B.cssAfter={display:"none"}};A.fn.cycle.transitions.scrollDown=function(C,D,B){C.css("overflow","hidden");B.before.push(function(G,E,F){A(this).show();F.cssBefore.top=1-E.offsetHeight;F.animOut.top=G.offsetHeight});B.cssFirst={top:0};B.animIn={top:0};B.cssAfter={display:"none"}};A.fn.cycle.transitions.scrollLeft=function(C,D,B){C.css("overflow","hidden");B.before.push(function(G,E,F){A(this).show();F.cssBefore.left=E.offsetWidth-1;F.animOut.left=0-G.offsetWidth});B.cssFirst={left:0};B.animIn={left:0}};A.fn.cycle.transitions.scrollRight=function(C,D,B){C.css("overflow","hidden");B.before.push(function(G,E,F){A(this).show();F.cssBefore.left=1-E.offsetWidth;F.animOut.left=G.offsetWidth});B.cssFirst={left:0};B.animIn={left:0}};A.fn.cycle.transitions.scrollHorz=function(C,D,B){C.css("overflow","hidden").width();B.before.push(function(I,G,H,F){A(this).show();var E=I.offsetWidth,J=G.offsetWidth;H.cssBefore=F?{left:J-1}:{left:1-J};H.animIn.left=0;H.animOut.left=F?-E:E;D.not(I).css(H.cssBefore)});B.cssFirst={left:0};B.cssAfter={display:"none"}};A.fn.cycle.transitions.scrollVert=function(C,D,B){C.css("overflow","hidden");B.before.push(function(J,G,H,F){A(this).show();var I=J.offsetHeight,E=G.offsetHeight;H.cssBefore=F?{top:1-E}:{top:E-1};H.animIn.top=0;H.animOut.top=F?I:-I;D.not(J).css(H.cssBefore)});B.cssFirst={top:0};B.cssAfter={display:"none"}};A.fn.cycle.transitions.slideX=function(C,D,B){B.before.push(function(G,E,F){A(G).css("zIndex",1)});B.onAddSlide=function(E){E.hide()};B.cssBefore={zIndex:2};B.animIn={width:"show"};B.animOut={width:"hide"}};A.fn.cycle.transitions.slideY=function(C,D,B){B.before.push(function(G,E,F){A(G).css("zIndex",1)});B.onAddSlide=function(E){E.hide()};B.cssBefore={zIndex:2};B.animIn={height:"show"};B.animOut={height:"hide"}};A.fn.cycle.transitions.shuffle=function(E,F,D){var B=E.css("overflow","visible").width();F.css({left:0,top:0});D.before.push(function(){A(this).show()});D.speed=D.speed/2;D.random=0;D.shuffle=D.shuffle||{left:-B,top:15};D.els=[];for(var C=0;C').cycle({ fx: 'fadeZoom', speed: '1000', timeout: 7000, pager: '#nav', before: onBefore, after: onAfter }); }); function onBefore() { $('#output').html(""); //window.console.log( $(this).parent().children().index(this) ); } function onAfter() { $('#output').append('

' + this.title + '

'); } /* Copyright (c) 2006 Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * See http://kelvinluck.com/assets/jquery/jScrollPane/ * $Id: jScrollPane.js 33 2008-12-10 22:55:28Z kelvin.luck $ */ /** * Replace the vertical scroll bars on any matched elements with a fancy * styleable (via CSS) version. With JS disabled the elements will * gracefully degrade to the browsers own implementation of overflow:auto. * If the mousewheel plugin has been included on the page then the scrollable areas will also * respond to the mouse wheel. * * @example jQuery(".scroll-pane").jScrollPane(); * * @name jScrollPane * @type jQuery * @param Object settings hash with options, described below. * scrollbarWidth - The width of the generated scrollbar in pixels * scrollbarMargin - The amount of space to leave on the side of the scrollbar in pixels * wheelSpeed - The speed the pane will scroll in response to the mouse wheel in pixels * showArrows - Whether to display arrows for the user to scroll with * arrowSize - The height of the arrow buttons if showArrows=true * animateTo - Whether to animate when calling scrollTo and scrollBy * dragMinHeight - The minimum height to allow the drag bar to be * dragMaxHeight - The maximum height to allow the drag bar to be * animateInterval - The interval in milliseconds to update an animating scrollPane (default 100) * animateStep - The amount to divide the remaining scroll distance by when animating (default 3) * maintainPosition- Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true) * scrollbarOnLeft - Display the scrollbar on the left side? (needs stylesheet changes, see examples.html) * reinitialiseOnImageLoad - Whether the jScrollPane should automatically re-initialise itself when any contained images are loaded * @return jQuery * @cat Plugins/jScrollPane * @author Kelvin Luck (kelvin AT kelvinluck DOT com || http://www.kelvinluck.com) */ (function($) { $.jScrollPane = { active : [] }; $.fn.jScrollPane = function(settings) { settings = $.extend({}, $.fn.jScrollPane.defaults, settings); var rf = function() { return false; }; return this.each( function() { var $this = $(this); // Switch the element's overflow to hidden to ensure we get the size of the element without the scrollbars [http://plugins.jquery.com/node/1208] $this.css('overflow', 'hidden'); var paneEle = this; if ($(this).parent().is('.jScrollPaneContainer')) { var currentScrollPosition = settings.maintainPosition ? $this.position().top : 0; var $c = $(this).parent(); var paneWidth = $c.innerWidth(); var paneHeight = $c.outerHeight(); var trackHeight = paneHeight; $('>.jScrollPaneTrack, >.jScrollArrowUp, >.jScrollArrowDown', $c).remove(); $this.css({'top':0}); } else { var currentScrollPosition = 0; this.originalPadding = $this.css('paddingTop') + ' ' + $this.css('paddingRight') + ' ' + $this.css('paddingBottom') + ' ' + $this.css('paddingLeft'); this.originalSidePaddingTotal = (parseInt($this.css('paddingLeft')) || 0) + (parseInt($this.css('paddingRight')) || 0); var paneWidth = $this.innerWidth(); var paneHeight = $this.innerHeight(); var trackHeight = paneHeight; $this.wrap( $('
').attr( {'className':'jScrollPaneContainer'} ).css( { 'height':paneHeight+'px', 'width':paneWidth+'px' } ) ); // deal with text size changes (if the jquery.em plugin is included) // and re-initialise the scrollPane so the track maintains the // correct size $(document).bind( 'emchange', function(e, cur, prev) { $this.jScrollPane(settings); } ); } if (settings.reinitialiseOnImageLoad) { // code inspired by jquery.onImagesLoad: http://plugins.jquery.com/project/onImagesLoad // except we re-initialise the scroll pane when each image loads so that the scroll pane is always up to size... // TODO: Do I even need to store it in $.data? Is a local variable here the same since I don't pass the reinitialiseOnImageLoad when I re-initialise? var $imagesToLoad = $.data(paneEle, 'jScrollPaneImagesToLoad') || $('img', $this); var loadedImages = []; if ($imagesToLoad.length) { $imagesToLoad.each(function(i, val) { $(this).bind('load', function() { if($.inArray(i, loadedImages) == -1){ //don't double count images loadedImages.push(val); //keep a record of images we've seen $imagesToLoad = $.grep($imagesToLoad, function(n, i) { return n != val; }); $.data(paneEle, 'jScrollPaneImagesToLoad', $imagesToLoad); settings.reinitialiseOnImageLoad = false; $this.jScrollPane(settings); // re-initialise } }).each(function(i, val) { if(this.complete || this.complete===undefined) { //needed for potential cached images this.src = this.src; } }); }); }; } var p = this.originalSidePaddingTotal; var cssToApply = { 'height':'auto', 'width':paneWidth - settings.scrollbarWidth - settings.scrollbarMargin - p + 'px' } if(settings.scrollbarOnLeft) { cssToApply.paddingLeft = settings.scrollbarMargin + settings.scrollbarWidth + 'px'; } else { cssToApply.paddingRight = settings.scrollbarMargin + 'px'; } $this.css(cssToApply); var contentHeight = $this.outerHeight(); var percentInView = paneHeight / contentHeight; if (percentInView < .99) { var $container = $this.parent(); $container.append( $('
').attr({'className':'jScrollPaneTrack'}).css({'width':settings.scrollbarWidth+'px'}).append( $('
').attr({'className':'jScrollPaneDrag'}).css({'width':settings.scrollbarWidth+'px'}).append( $('
').attr({'className':'jScrollPaneDragTop'}).css({'width':settings.scrollbarWidth+'px'}), $('
').attr({'className':'jScrollPaneDragBottom'}).css({'width':settings.scrollbarWidth+'px'}) ) ) ); var $track = $('>.jScrollPaneTrack', $container); var $drag = $('>.jScrollPaneTrack .jScrollPaneDrag', $container); if (settings.showArrows) { var currentArrowButton; var currentArrowDirection; var currentArrowInterval; var currentArrowInc; var whileArrowButtonDown = function() { if (currentArrowInc > 4 || currentArrowInc%4==0) { positionDrag(dragPosition + currentArrowDirection * mouseWheelMultiplier); } currentArrowInc ++; }; var onArrowMouseUp = function(event) { $('html').unbind('mouseup', onArrowMouseUp); currentArrowButton.removeClass('jScrollActiveArrowButton'); clearInterval(currentArrowInterval); }; var onArrowMouseDown = function() { $('html').bind('mouseup', onArrowMouseUp); currentArrowButton.addClass('jScrollActiveArrowButton'); currentArrowInc = 0; whileArrowButtonDown(); currentArrowInterval = setInterval(whileArrowButtonDown, 100); }; $container .append( $('') .attr({'href':'javascript:;', 'className':'jScrollArrowUp'}) .css({'width':settings.scrollbarWidth+'px'}) .html('Scroll up') .bind('mousedown', function() { currentArrowButton = $(this); currentArrowDirection = -1; onArrowMouseDown(); this.blur(); return false; }) .bind('click', rf), $('') .attr({'href':'javascript:;', 'className':'jScrollArrowDown'}) .css({'width':settings.scrollbarWidth+'px'}) .html('Scroll down') .bind('mousedown', function() { currentArrowButton = $(this); currentArrowDirection = 1; onArrowMouseDown(); this.blur(); return false; }) .bind('click', rf) ); var $upArrow = $('>.jScrollArrowUp', $container); var $downArrow = $('>.jScrollArrowDown', $container); if (settings.arrowSize) { trackHeight = paneHeight - settings.arrowSize - settings.arrowSize; $track .css({'height': trackHeight+'px', top:settings.arrowSize+'px'}) } else { var topArrowHeight = $upArrow.height(); settings.arrowSize = topArrowHeight; trackHeight = paneHeight - topArrowHeight - $downArrow.height(); $track .css({'height': trackHeight+'px', top:topArrowHeight+'px'}) } } var $pane = $(this).css({'position':'absolute', 'overflow':'visible'}); var currentOffset; var maxY; var mouseWheelMultiplier; // store this in a seperate variable so we can keep track more accurately than just updating the css property.. var dragPosition = 0; var dragMiddle = percentInView*paneHeight/2; // pos function borrowed from tooltip plugin and adapted... var getPos = function (event, c) { var p = c == 'X' ? 'Left' : 'Top'; return event['page' + c] || (event['client' + c] + (document.documentElement['scroll' + p] || document.body['scroll' + p])) || 0; }; var ignoreNativeDrag = function() { return false; }; var initDrag = function() { ceaseAnimation(); currentOffset = $drag.offset(false); currentOffset.top -= dragPosition; maxY = trackHeight - $drag[0].offsetHeight; mouseWheelMultiplier = 2 * settings.wheelSpeed * maxY / contentHeight; }; var onStartDrag = function(event) { initDrag(); dragMiddle = getPos(event, 'Y') - dragPosition - currentOffset.top; $('html').bind('mouseup', onStopDrag).bind('mousemove', updateScroll); if ($.browser.msie) { $('html').bind('dragstart', ignoreNativeDrag).bind('selectstart', ignoreNativeDrag); } return false; }; var onStopDrag = function() { $('html').unbind('mouseup', onStopDrag).unbind('mousemove', updateScroll); dragMiddle = percentInView*paneHeight/2; if ($.browser.msie) { $('html').unbind('dragstart', ignoreNativeDrag).unbind('selectstart', ignoreNativeDrag); } }; var positionDrag = function(destY) { destY = destY < 0 ? 0 : (destY > maxY ? maxY : destY); dragPosition = destY; $drag.css({'top':destY+'px'}); var p = destY / maxY; $pane.css({'top':((paneHeight-contentHeight)*p) + 'px'}); $this.trigger('scroll'); if (settings.showArrows) { $upArrow[destY == 0 ? 'addClass' : 'removeClass']('disabled'); $downArrow[destY == maxY ? 'addClass' : 'removeClass']('disabled'); } }; var updateScroll = function(e) { positionDrag(getPos(e, 'Y') - currentOffset.top - dragMiddle); }; var dragH = Math.max(Math.min(percentInView*(paneHeight-settings.arrowSize*2), settings.dragMaxHeight), settings.dragMinHeight); $drag.css( {'height':dragH+'px'} ).bind('mousedown', onStartDrag); var trackScrollInterval; var trackScrollInc; var trackScrollMousePos; var doTrackScroll = function() { if (trackScrollInc > 8 || trackScrollInc%4==0) { positionDrag((dragPosition - ((dragPosition - trackScrollMousePos) / 2))); } trackScrollInc ++; }; var onStopTrackClick = function() { clearInterval(trackScrollInterval); $('html').unbind('mouseup', onStopTrackClick).unbind('mousemove', onTrackMouseMove); }; var onTrackMouseMove = function(event) { trackScrollMousePos = getPos(event, 'Y') - currentOffset.top - dragMiddle; }; var onTrackClick = function(event) { initDrag(); onTrackMouseMove(event); trackScrollInc = 0; $('html').bind('mouseup', onStopTrackClick).bind('mousemove', onTrackMouseMove); trackScrollInterval = setInterval(doTrackScroll, 100); doTrackScroll(); }; $track.bind('mousedown', onTrackClick); $container.bind( 'mousewheel', function (event, delta) { initDrag(); ceaseAnimation(); var d = dragPosition; positionDrag(dragPosition - delta * mouseWheelMultiplier); var dragOccured = d != dragPosition; return !dragOccured; } ); var _animateToPosition; var _animateToInterval; function animateToPosition() { var diff = (_animateToPosition - dragPosition) / settings.animateStep; if (diff > 1 || diff < -1) { positionDrag(dragPosition + diff); } else { positionDrag(_animateToPosition); ceaseAnimation(); } } var ceaseAnimation = function() { if (_animateToInterval) { clearInterval(_animateToInterval); delete _animateToPosition; } }; var scrollTo = function(pos, preventAni) { if (typeof pos == "string") { $e = $(pos, $this); if (!$e.length) return; pos = $e.offset().top - $this.offset().top; } $container.scrollTop(0); ceaseAnimation(); var destDragPosition = -pos/(paneHeight-contentHeight) * maxY; if (preventAni || !settings.animateTo) { positionDrag(destDragPosition); } else { _animateToPosition = destDragPosition; _animateToInterval = setInterval(animateToPosition, settings.animateInterval); } }; $this[0].scrollTo = scrollTo; $this[0].scrollBy = function(delta) { var currentPos = -parseInt($pane.css('top')) || 0; scrollTo(currentPos + delta); }; initDrag(); scrollTo(-currentScrollPosition, true); // Deal with it when the user tabs to a link or form element within this scrollpane $('*', this).bind( 'focus', function(event) { var $e = $(this); // loop through parents adding the offset top of any elements that are relatively positioned between // the focused element and the jScrollPaneContainer so we can get the true distance from the top // of the focused element to the top of the scrollpane... var eleTop = 0; while ($e[0] != $this[0]) { eleTop += $e.position().top; $e = $e.offsetParent(); } var viewportTop = -parseInt($pane.css('top')) || 0; var maxVisibleEleTop = viewportTop + paneHeight; var eleInView = eleTop > viewportTop && eleTop < maxVisibleEleTop; if (!eleInView) { var destPos = eleTop - settings.scrollbarMargin; if (eleTop > viewportTop) { // element is below viewport - scroll so it is at bottom. destPos += $(this).height() + 15 + settings.scrollbarMargin - paneHeight; } scrollTo(destPos); } } ) if (location.hash) { scrollTo(location.hash); } // use event delegation to listen for all clicks on links and hijack them if they are links to // anchors within our content... $(document).bind( 'click', function(e) { $target = $(e.target); if ($target.is('a')) { var h = $target.attr('href'); if (h.substr(0, 1) == '#') { scrollTo(h); } } } ); $.jScrollPane.active.push($this[0]); } else { $this.css( { 'height':paneHeight+'px', 'width':paneWidth-this.originalSidePaddingTotal+'px', 'padding':this.originalPadding } ); // remove from active list? $this.parent().unbind('mousewheel'); } } ) }; $.fn.jScrollPane.defaults = { scrollbarWidth : 10, scrollbarMargin : 5, wheelSpeed : 18, showArrows : false, arrowSize : 0, animateTo : false, dragMinHeight : 1, dragMaxHeight : 99999, animateInterval : 100, animateStep: 3, maintainPosition: true, scrollbarOnLeft: false, reinitialiseOnImageLoad: false }; // clean up the scrollTo expandos $(window) .bind('unload', function() { var els = $.jScrollPane.active; for (var i=0; i