/* 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 = '/skin/default/images/loading.gif'; this.filecloseimage = '/skin/default/images/close.png'; this.resizeduration = 700; this.fadeduration = 500; this.labelimage = "image"; this.labelof = "of"; } 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-close'}).append($('', { src: this.options.filecloseimage }))), $('
', { "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' }))))).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);