/* Lightbox v2.51 by Lokesh Dhakar - http://www.lokeshdhakar.com 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 proto-aculous in v2.05. Table of Contents ================= LightboxOptions Lightbox - constructor - init - enable - build - start - changeImage - sizeContainer - showImage - updateNav - updateDetails - preloadNeigbhoringImages - enableKeyboardNav - disableKeyboardNav - keyboardAction - end options = new LightboxOptions lightbox = new Lightbox options */ (function() { var $, Lightbox, LightboxOptions; $ = jQuery; LightboxOptions = (function() { function LightboxOptions() { this.fileLoadingImage = 'includes/lightbox/images/loading.gif'; this.fileCloseImage = 'includes/lightbox/images/close.png'; this.resizeDuration = 700; this.fadeDuration = 500; this.labelImage = ""; this.labelOf = ""; } return LightboxOptions; })(); Lightbox = (function() { function Lightbox(options) { this.options = options; this.album = []; this.currentImageIndex = void 0; this.init(); } Lightbox.prototype.init = function() { this.enable(); return this.build(); }; Lightbox.prototype.enable = function() { var _this = this; return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) { _this.start($(e.currentTarget)); return false; }); }; Lightbox.prototype.build = function() { var $lightbox, _this = this; $("

", { id: 'lightboxOverlay' }).after($('

', { id: 'lightbox' }).append($('

', { "class": 'lb-outerContainer' }).append($('

', { "class": 'lb-container' }).append($('', { "class": 'lb-image' }), $('

', { "class": 'lb-nav' }).append($('', { "class": 'lb-prev' }), $('', { "class": 'lb-next' })), $('

', { "class": 'lb-loader' }).append($('', { "class": 'lb-cancel' }).append($('', { src: this.options.fileLoadingImage }))))), $('

', { "class": 'lb-dataContainer' }).append($('

', { "class": 'lb-data' }).append($('

', { "class": 'lb-details' }).append($('', { "class": 'lb-caption' }), $('', { "class": 'lb-number' })), $('

', { "class": 'lb-closeContainer' }).append($('', { "class": 'lb-close' }).append($('', { src: this.options.fileCloseImage }))))))).appendTo($('body')); $('#lightboxOverlay').hide().on('click', function(e) { _this.end(); return false; }); $lightbox = $('#lightbox'); $lightbox.hide().on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-outerContainer').on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-prev').on('click', function(e) { _this.changeImage(_this.currentImageIndex - 1); return false; }); $lightbox.find('.lb-next').on('click', function(e) { _this.changeImage(_this.currentImageIndex + 1); return false; }); $lightbox.find('.lb-loader, .lb-close').on('click', function(e) { _this.end(); return false; }); }; Lightbox.prototype.start = function($link) { var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref; $(window).on("resize", this.sizeOverlay); $('select, object, embed').css({ visibility: "hidden" }); $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration); this.album = []; imageNumber = 0; if ($link.attr('rel') === 'lightbox') { this.album.push({ link: $link.attr('href'), title: $link.attr('title') }); } else { _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]'); for (i = 0, _len = _ref.length; i < _len; i++) { a = _ref[i]; this.album.push({ link: $(a).attr('href'), title: $(a).attr('title') }); if ($(a).attr('href') === $link.attr('href')) imageNumber = i; } } $window = $(window); top = $window.scrollTop() + $window.height() / 10; left = $window.scrollLeft(); $lightbox = $('#lightbox'); $lightbox.css({ top: top + 'px', left: left + 'px' }).fadeIn(this.options.fadeDuration); this.changeImage(imageNumber); }; Lightbox.prototype.changeImage = function(imageNumber) { var $image, $lightbox, preloader, _this = this; this.disableKeyboardNav(); $lightbox = $('#lightbox'); $image = $lightbox.find('.lb-image'); this.sizeOverlay(); $('#lightboxOverlay').fadeIn(this.options.fadeDuration); $('.loader').fadeIn('slow'); $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); $lightbox.find('.lb-outerContainer').addClass('animating'); preloader = new Image; preloader.onload = function() { $image.attr('src', _this.album[imageNumber].link); $image.width = preloader.width; $image.height = preloader.height; return _this.sizeContainer(preloader.width, preloader.height); }; preloader.src = this.album[imageNumber].link; this.currentImageIndex = imageNumber; }; Lightbox.prototype.sizeOverlay = function() { return $('#lightboxOverlay').width($(document).width()).height($(document).height()); }; Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth, _this = this; $lightbox = $('#lightbox'); $outerContainer = $lightbox.find('.lb-outerContainer'); oldWidth = $outerContainer.outerWidth(); oldHeight = $outerContainer.outerHeight(); $container = $lightbox.find('.lb-container'); containerTopPadding = parseInt($container.css('padding-top'), 10); containerRightPadding = parseInt($container.css('padding-right'), 10); containerBottomPadding = parseInt($container.css('padding-bottom'), 10); containerLeftPadding = parseInt($container.css('padding-left'), 10); newWidth = imageWidth + containerLeftPadding + containerRightPadding; newHeight = imageHeight + containerTopPadding + containerBottomPadding; if (newWidth !== oldWidth && newHeight !== oldHeight) { $outerContainer.animate({ width: newWidth, height: newHeight }, this.options.resizeDuration, 'swing'); } else if (newWidth !== oldWidth) { $outerContainer.animate({ width: newWidth }, this.options.resizeDuration, 'swing'); } else if (newHeight !== oldHeight) { $outerContainer.animate({ height: newHeight }, this.options.resizeDuration, 'swing'); } setTimeout(function() { $lightbox.find('.lb-dataContainer').width(newWidth); $lightbox.find('.lb-prevLink').height(newHeight); $lightbox.find('.lb-nextLink').height(newHeight); _this.showImage(); }, this.options.resizeDuration); }; Lightbox.prototype.showImage = function() { var $lightbox; $lightbox = $('#lightbox'); $lightbox.find('.lb-loader').hide(); $lightbox.find('.lb-image').fadeIn('slow'); this.updateNav(); this.updateDetails(); this.preloadNeighboringImages(); this.enableKeyboardNav(); }; Lightbox.prototype.updateNav = function() { var $lightbox; $lightbox = $('#lightbox'); $lightbox.find('.lb-nav').show(); if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); if (this.currentImageIndex < this.album.length - 1) { $lightbox.find('.lb-next').show(); } }; Lightbox.prototype.updateDetails = function() { var $lightbox, _this = this; $lightbox = $('#lightbox'); if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast'); } if (this.album.length > 1) { $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast'); } else { $lightbox.find('.lb-number').hide(); } $lightbox.find('.lb-outerContainer').removeClass('animating'); $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() { return _this.sizeOverlay(); }); }; Lightbox.prototype.preloadNeighboringImages = function() { var preloadNext, preloadPrev; if (this.album.length > this.currentImageIndex + 1) { preloadNext = new Image; preloadNext.src = this.album[this.currentImageIndex + 1].link; } if (this.currentImageIndex > 0) { preloadPrev = new Image; preloadPrev.src = this.album[this.currentImageIndex - 1].link; } }; Lightbox.prototype.enableKeyboardNav = function() { $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); }; Lightbox.prototype.disableKeyboardNav = function() { $(document).off('.keyboard'); }; Lightbox.prototype.keyboardAction = function(event) { var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode; KEYCODE_ESC = 27; KEYCODE_LEFTARROW = 37; KEYCODE_RIGHTARROW = 39; keycode = event.keyCode; key = String.fromCharCode(keycode).toLowerCase(); if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { this.end(); } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { if (this.currentImageIndex !== 0) { this.changeImage(this.currentImageIndex - 1); } } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { if (this.currentImageIndex !== this.album.length - 1) { this.changeImage(this.currentImageIndex + 1); } } }; Lightbox.prototype.end = function() { this.disableKeyboardNav(); $(window).off("resize", this.sizeOverlay); $('#lightbox').fadeOut(this.options.fadeDuration); $('#lightboxOverlay').fadeOut(this.options.fadeDuration); return $('select, object, embed').css({ visibility: "visible" }); }; return Lightbox; })(); $(function() { var lightbox, options; options = new LightboxOptions; return lightbox = new Lightbox(options); }); }).call(this);