LightboxOptions = Object.extend({ fileLoadingImage: "images/loading.gif", fileBottomNavCloseImage: "images/closelabel.gif", overlayOpacity: 0.8, animate: true, resizeSpeed: 7, borderSize: 10, labelImage: "Image", labelOf: "of" }, window.LightboxOptions || {}); var Lightbox = Class.create(); Lightbox.prototype = { imageArray: [], activeImage: undefined, initialize: function() { this.updateImageList(); this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) { LightboxOptions.resizeSpeed = 10 } if (LightboxOptions.resizeSpeed < 1) { LightboxOptions.resizeSpeed = 1 } this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; var B = (LightboxOptions.animate ? 250 : 1) + "px"; var A = $$("body")[0]; A.appendChild(Builder.node("div", { id: "overlay" })); A.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(D) { if (D.element().id == "lightbox") { this.end() } }).bind(this)); $("outerImageContainer").setStyle({ width: B, height: B }); $("prevLink").observe("click", (function(D) { D.stop(); this.changeImage(this.activeImage - 1) }).bindAsEventListener(this)); $("nextLink").observe("click", (function(D) { D.stop(); this.changeImage(this.activeImage + 1) }).bindAsEventListener(this)); $("loadingLink").observe("click", (function(D) { D.stop(); this.end() }).bind(this)); $("bottomNavClose").observe("click", (function(D) { D.stop(); this.end() }).bind(this)); var C = this; (function() { var D = "overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose"; $w(D).each(function(E) { C[E] = $(E) }) }).defer() }, updateImageList: function() { this.updateImageList = Prototype.emptyFunction; document.observe("click", (function(A) { var B = A.findElement("a[rel^=lightbox]") || A.findElement("area[rel^=lightbox]"); if (B) { A.stop(); this.start(B) } }).bind(this)) }, start: function(F) { $$("select", "object", "embed").each(function(G) { G.style.visibility = "hidden" }); var C = this.getPageSize(); $("overlay").setStyle({ width: C[0] + "px", height: C[1] + "px" }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0, to: LightboxOptions.overlayOpacity }); this.imageArray = []; var B = 0; if ((F.rel == "lightbox")) { this.imageArray.push([F.href, F.title]) } else { this.imageArray = $$(F.tagName + '[href][rel="' + F.rel + '"]').collect(function(G) { return [G.href, G.title] }).uniq(); while (this.imageArray[B][0] != F.href) { B++ } } var A = document.viewport.getScrollOffsets(); var E = A[1] + (document.viewport.getHeight() / 10); var D = A[0]; this.lightbox.setStyle({ top: E + "px", left: D + "px" }).show(); this.changeImage(B) }, changeImage: function(B) { this.activeImage = B; if (LightboxOptions.animate) { this.loading.show() } this.lightboxImage.hide(); this.hoverNav.hide(); this.prevLink.hide(); this.nextLink.hide(); this.imageDataContainer.setStyle({ opacity: 0.0001 }); this.numberDisplay.hide(); var A = new Image(); A.onload = (function() { this.lightboxImage.src = this.imageArray[this.activeImage][0]; this.resizeImageContainer(A.width, A.height) }).bind(this); A.src = this.imageArray[this.activeImage][0] }, resizeImageContainer: function(E, F) { var H = this.outerImageContainer.getWidth(); var C = this.outerImageContainer.getHeight(); var G = (E + LightboxOptions.borderSize * 2); var J = (F + LightboxOptions.borderSize * 2); var K = (G / H) * 100; var B = (J / C) * 100; var I = H - G; var A = C - J; if (A != 0) { new Effect.Scale(this.outerImageContainer, B, { scaleX: false, duration: this.resizeDuration, queue: "front" }) } if (I != 0) { new Effect.Scale(this.outerImageContainer, K, { scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration }) } var D = 0; if ((A == 0) && (I == 0)) { D = 100; if (Prototype.Browser.IE) { D = 250 } } (function() { this.prevLink.setStyle({ height: F + "px" }); this.nextLink.setStyle({ height: F + "px" }); this.imageDataContainer.setStyle({ width: G + "px" }); this.showImage() }).bind(this).delay(D / 1000) }, 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() { if (this.imageArray[this.activeImage][1] != "") { this.caption.update(this.imageArray[this.activeImage][1]).show() } if (this.imageArray.length > 1) { this.numberDisplay.update(LightboxOptions.labelImage + " " + (this.activeImage + 1) + " " + LightboxOptions.labelOf + "  " + this.imageArray.length).show() } new Effect.Parallel([new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0, to: 1 }), new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })], { duration: this.resizeDuration, afterFinish: (function() { var A = this.getPageSize(); this.overlay.setStyle({ height: A[1] + "px" }); this.updateNav() }).bind(this) }) }, updateNav: function() { this.hoverNav.show(); if (this.activeImage > 0) { this.prevLink.show() } if (this.activeImage < (this.imageArray.length - 1)) { this.nextLink.show() } this.enableKeyboardNav() }, enableKeyboardNav: function() { document.observe("keydown", this.keyboardAction) }, disableKeyboardNav: function() { document.stopObserving("keydown", this.keyboardAction) }, keyboardAction: function(D) { var A = D.keyCode; var B; if (D.DOM_VK_ESCAPE) { B = D.DOM_VK_ESCAPE } else { B = 27 } var C = String.fromCharCode(A).toLowerCase(); if (C.match(/x|o|c/) || (A == B)) { this.end() } else { if ((C == "p") || (A == 37)) { if (this.activeImage != 0) { this.disableKeyboardNav(); this.changeImage(this.activeImage - 1) } } else { if ((C == "n") || (A == 39)) { if (this.activeImage != (this.imageArray.length - 1)) { this.disableKeyboardNav(); this.changeImage(this.activeImage + 1) } } } } }, preloadNeighborImages: function() { var A, B; if (this.imageArray.length > this.activeImage + 1) { A = new Image(); A.src = this.imageArray[this.activeImage + 1][0] } if (this.activeImage > 0) { B = new Image(); B.src = this.imageArray[this.activeImage - 1][0] } }, end: function() { this.disableKeyboardNav(); this.lightbox.hide(); new Effect.Fade(this.overlay, { duration: this.overlayDuration }); $$("select", "object", "embed").each(function(A) { A.style.visibility = "visible" }) }, getPageSize: function() { var C, A; if (window.innerHeight && window.scrollMaxY) { C = window.innerWidth + window.scrollMaxX; A = window.innerHeight + window.scrollMaxY } else { if (document.body.scrollHeight > document.body.offsetHeight) { C = document.body.scrollWidth; A = document.body.scrollHeight } else { C = document.body.offsetWidth; A = document.body.offsetHeight } } var B, D; if (self.innerHeight) { if (document.documentElement.clientWidth) { B = document.documentElement.clientWidth } else { B = self.innerWidth } D = self.innerHeight } else { if (document.documentElement && document.documentElement.clientHeight) { B = document.documentElement.clientWidth; D = document.documentElement.clientHeight } else { if (document.body) { B = document.body.clientWidth; D = document.body.clientHeight } } } if (A < D) { pageHeight = D } else { pageHeight = A } if (C < B) { pageWidth = C } else { pageWidth = B } return [pageWidth, pageHeight] } }; document.observe("dom:loaded", function() { new Lightbox() });