// ----------------------------------------------------------------------------------- // // Lightbox v2.04 // by Lokesh Dhakar - http://www.lokeshdhakar.com // Last Modification: 2/9/08 // // For more information, visit: // http://lokeshdhakar.com/projects/lightbox2/ // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // - Free for use in both personal and commercial projects // - Attribution requires leaving author name, author link, and the license info intact. // // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. // // ----------------------------------------------------------------------------------- LightboxOptions=Object.extend({fileLoadingImage:"images/loading.gif",fileBottomNavCloseImage:"images/closelabel.gif",overlayOpacity:0.8,animate:!0,resizeSpeed:7,borderSize:10,labelImage:"Image",labelOf:"of"},window.LightboxOptions||{});var Lightbox=Class.create(); Lightbox.prototype={imageArray:[],activeImage:void 0,initialize:function(){this.updateImageList();this.keyboardAction=this.keyboardAction.bindAsEventListener(this);if(10LightboxOptions.resizeSpeed)LightboxOptions.resizeSpeed=1;this.resizeDuration=LightboxOptions.animate?0.15*(11-LightboxOptions.resizeSpeed):0;this.overlayDuration=LightboxOptions.animate?0.2:0;var a=(LightboxOptions.animate?250:1)+"px",b=$$("body")[0];b.appendChild(Builder.node("div", {id:"overlay"}));b.appendChild(Builder.node("div",{id:"lightbox"},[Builder.node("div",{id:"outerImageContainer"},Builder.node("div",{id:"imageContainer"},[Builder.node("img",{id:"lightboxImage"}),Builder.node("div",{id:"hoverNav"},[Builder.node("a",{id:"prevLink",href:"#"}),Builder.node("a",{id:"nextLink",href:"#"})]),Builder.node("div",{id:"loading"},Builder.node("a",{id:"loadingLink",href:"#"},Builder.node("img",{src:LightboxOptions.fileLoadingImage})))])),Builder.node("div",{id:"imageDataContainer"}, Builder.node("div",{id:"imageData"},[Builder.node("div",{id:"imageDetails"},[Builder.node("span",{id:"caption"}),Builder.node("span",{id:"numberDisplay"})]),Builder.node("div",{id:"bottomNav"},Builder.node("a",{id:"bottomNavClose",href:"#"},Builder.node("img",{src:LightboxOptions.fileBottomNavCloseImage})))]))]));$("overlay").hide().observe("click",function(){this.end()}.bind(this));$("lightbox").hide().observe("click",function(a){"lightbox"==a.element().id&&this.end()}.bind(this));$("outerImageContainer").setStyle({width:a, height:a});$("prevLink").observe("click",function(a){a.stop();this.changeImage(this.activeImage-1)}.bindAsEventListener(this));$("nextLink").observe("click",function(a){a.stop();this.changeImage(this.activeImage+1)}.bindAsEventListener(this));$("loadingLink").observe("click",function(a){a.stop();this.end()}.bind(this));$("bottomNavClose").observe("click",function(a){a.stop();this.end()}.bind(this));var c=this;(function(){$w("overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose").each(function(a){c[a]= $(a)})}).defer()},updateImageList:function(){this.updateImageList=Prototype.emptyFunction;document.observe("click",function(a){var b=a.findElement("a[rel^=lightbox]")||a.findElement("area[rel^=lightbox]");b&&(a.stop(),this.start(b))}.bind(this))},start:function(a){$$("select","object","embed").each(function(a){a.style.visibility="hidden"});var b=this.getPageSize();$("overlay").setStyle({width:b[0]+"px",height:b[1]+"px"});new Effect.Appear(this.overlay,{duration:this.overlayDuration,from:0,to:LightboxOptions.overlayOpacity}); this.imageArray=[];b=0;if("lightbox"==a.rel)this.imageArray.push([a.href,a.title]);else for(this.imageArray=$$(a.tagName+'[href][rel="'+a.rel+'"]').collect(function(a){return[a.href,a.title]}).uniq();this.imageArray[b][0]!=a.href;)b++;a=document.viewport.getScrollOffsets();this.lightbox.setStyle({top:a[1]+document.viewport.getHeight()/10+"px",left:a[0]+"px"}).show();this.changeImage(b)},changeImage:function(a){this.activeImage=a;LightboxOptions.animate&&this.loading.show();this.lightboxImage.hide(); this.hoverNav.hide();this.prevLink.hide();this.nextLink.hide();this.imageDataContainer.setStyle({opacity:1.0E-4});this.numberDisplay.hide();var b=new Image;b.onload=function(){this.lightboxImage.src=this.imageArray[this.activeImage][0];this.resizeImageContainer(b.width,b.height)}.bind(this);b.src=this.imageArray[this.activeImage][0]},resizeImageContainer:function(a,b){var c=this.outerImageContainer.getWidth(),d=this.outerImageContainer.getHeight(),e=a+2*LightboxOptions.borderSize,f=b+2*LightboxOptions.borderSize, h=100*(e/c),c=c-e,g=d-f;0!=g&&new Effect.Scale(this.outerImageContainer,100*(f/d),{scaleX:!1,duration:this.resizeDuration,queue:"front"});0!=c&&new Effect.Scale(this.outerImageContainer,h,{scaleY:!1,duration:this.resizeDuration,delay:this.resizeDuration});d=0;0==g&&0==c&&(d=100,Prototype.Browser.IE&&(d=250));(function(){this.prevLink.setStyle({height:b+"px"});this.nextLink.setStyle({height:b+"px"});this.imageDataContainer.setStyle({width:e+"px"});this.showImage()}).bind(this).delay(d/1E3)},showImage:function(){this.loading.hide(); new Effect.Appear(this.lightboxImage,{duration:this.resizeDuration,queue:"end",afterFinish:function(){this.updateDetails()}.bind(this)});this.preloadNeighborImages()},updateDetails:function(){""!=this.imageArray[this.activeImage][1]&&this.caption.update(this.imageArray[this.activeImage][1]).show();1this.activeImage+1)a=new Image,a.src=this.imageArray[this.activeImage+1][0];if(0document.body.offsetHeight?(a=document.body.scrollWidth,b=document.body.scrollHeight):(a=document.body.offsetWidth,b=document.body.offsetHeight);var c,d;if(self.innerHeight)c=document.documentElement.clientWidth?document.documentElement.clientWidth:self.innerWidth,d=self.innerHeight;else if(document.documentElement&&document.documentElement.clientHeight)c=document.documentElement.clientWidth,d=document.documentElement.clientHeight; else if(document.body)c=document.body.clientWidth,d=document.body.clientHeight;pageHeight=b