diff --git a/e107_plugins/gallery/e_header.php b/e107_plugins/gallery/e_header.php index a7de9db0d..3996aa836 100644 --- a/e107_plugins/gallery/e_header.php +++ b/e107_plugins/gallery/e_header.php @@ -13,6 +13,14 @@ e107::css('gallery', 'jslib/lightbox/css/lightbox.css','jquery'); e107::js('gallery', 'jslib/jquery.cycle.all.js','jquery'); e107::css('gallery', 'gallery_style.css'); +e107::css('inline', " +/* Gallery CSS */ +a.lb-close { width:27px; height:27px; background:url(".SITEURLBASE.e_PLUGIN_ABS."gallery/images/close.png) no-repeat 0 0; } +.lb-loader { background:url(".SITEURLBASE.e_PLUGIN_ABS."gallery/images/loading.gif) no-repeat 50% 49%; } + +",'jquery'); + + $gp = e107::getPlugPref('gallery'); e107::js('inline'," diff --git a/e107_plugins/gallery/jslib/lightbox/js/lightbox.js b/e107_plugins/gallery/jslib/lightbox/js/lightbox.js index 8e5c1b4f0..669c49581 100644 --- a/e107_plugins/gallery/jslib/lightbox/js/lightbox.js +++ b/e107_plugins/gallery/jslib/lightbox/js/lightbox.js @@ -1,351 +1,352 @@ - -/* -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 = 'images/loading.gif'; - this.fileCloseImage = 'images/close.png'; - this.resizeDuration = 300; - this.fadeDuration = 100; - 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-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); + +/* +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 = 'images/loading.gif'; + this.fileCloseImage = 'images/close.png'; + this.resizeDuration = 300; + this.fadeDuration = 100; + 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)); + console.log(this); + 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($('', { + "class": 'lb' + }))))), $('
', { + "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($('', { + "class": 'lb' + }))))))).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);