|
| 1 | + |
| 2 | +/* |
| 3 | +Lightbox v2.51 |
| 4 | +by Lokesh Dhakar - http://www.lokeshdhakar.com |
| 5 | +
|
| 6 | +For more information, visit: |
| 7 | +http://lokeshdhakar.com/projects/lightbox2/ |
| 8 | +
|
| 9 | +Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ |
| 10 | +- free for use in both personal and commercial projects |
| 11 | +- attribution requires leaving author name, author link, and the license info intact |
| 12 | + |
| 13 | +Thanks |
| 14 | +- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. |
| 15 | +- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05. |
| 16 | +
|
| 17 | +
|
| 18 | +Table of Contents |
| 19 | +================= |
| 20 | +LightboxOptions |
| 21 | +
|
| 22 | +Lightbox |
| 23 | +- constructor |
| 24 | +- init |
| 25 | +- enable |
| 26 | +- build |
| 27 | +- start |
| 28 | +- changeImage |
| 29 | +- sizeContainer |
| 30 | +- showImage |
| 31 | +- updateNav |
| 32 | +- updateDetails |
| 33 | +- preloadNeigbhoringImages |
| 34 | +- enableKeyboardNav |
| 35 | +- disableKeyboardNav |
| 36 | +- keyboardAction |
| 37 | +- end |
| 38 | +
|
| 39 | +options = new LightboxOptions |
| 40 | +lightbox = new Lightbox options |
| 41 | +*/ |
| 42 | + |
| 43 | +(function() { |
| 44 | + var $, Lightbox, LightboxOptions; |
| 45 | + |
| 46 | + $ = jQuery; |
| 47 | + |
| 48 | + LightboxOptions = (function() { |
| 49 | + |
| 50 | + function LightboxOptions() { |
| 51 | + this.fileLoadingImage = 'images/loading.gif'; |
| 52 | + this.fileCloseImage = 'images/close.png'; |
| 53 | + this.resizeDuration = 700; |
| 54 | + this.fadeDuration = 500; |
| 55 | + this.labelImage = "Image"; |
| 56 | + this.labelOf = "of"; |
| 57 | + } |
| 58 | + |
| 59 | + return LightboxOptions; |
| 60 | + |
| 61 | + })(); |
| 62 | + |
| 63 | + Lightbox = (function() { |
| 64 | + |
| 65 | + function Lightbox(options) { |
| 66 | + this.options = options; |
| 67 | + this.album = []; |
| 68 | + this.currentImageIndex = void 0; |
| 69 | + this.init(); |
| 70 | + } |
| 71 | + |
| 72 | + Lightbox.prototype.init = function() { |
| 73 | + this.enable(); |
| 74 | + return this.build(); |
| 75 | + }; |
| 76 | + |
| 77 | + Lightbox.prototype.enable = function() { |
| 78 | + var _this = this; |
| 79 | + return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) { |
| 80 | + _this.start($(e.currentTarget)); |
| 81 | + return false; |
| 82 | + }); |
| 83 | + }; |
| 84 | + |
| 85 | + Lightbox.prototype.build = function() { |
| 86 | + var $lightbox, |
| 87 | + _this = this; |
| 88 | + $("<div>", { |
| 89 | + id: 'lightboxOverlay' |
| 90 | + }).after($('<div/>', { |
| 91 | + id: 'lightbox' |
| 92 | + }).append($('<div/>', { |
| 93 | + "class": 'lb-outerContainer' |
| 94 | + }).append($('<div/>', { |
| 95 | + "class": 'lb-container' |
| 96 | + }).append($('<img/>', { |
| 97 | + "class": 'lb-image' |
| 98 | + }), $('<div/>', { |
| 99 | + "class": 'lb-nav' |
| 100 | + }).append($('<a/>', { |
| 101 | + "class": 'lb-prev' |
| 102 | + }), $('<a/>', { |
| 103 | + "class": 'lb-next' |
| 104 | + })), $('<div/>', { |
| 105 | + "class": 'lb-loader' |
| 106 | + }).append($('<a/>', { |
| 107 | + "class": 'lb-cancel' |
| 108 | + }).append($('<img/>', { |
| 109 | + src: this.options.fileLoadingImage |
| 110 | + }))))), $('<div/>', { |
| 111 | + "class": 'lb-dataContainer' |
| 112 | + }).append($('<div/>', { |
| 113 | + "class": 'lb-data' |
| 114 | + }).append($('<div/>', { |
| 115 | + "class": 'lb-details' |
| 116 | + }).append($('<span/>', { |
| 117 | + "class": 'lb-caption' |
| 118 | + }), $('<span/>', { |
| 119 | + "class": 'lb-number' |
| 120 | + })), $('<div/>', { |
| 121 | + "class": 'lb-closeContainer' |
| 122 | + }).append($('<a/>', { |
| 123 | + "class": 'lb-close' |
| 124 | + }).append($('<img/>', { |
| 125 | + src: this.options.fileCloseImage |
| 126 | + }))))))).appendTo($('body')); |
| 127 | + $('#lightboxOverlay').hide().on('click', function(e) { |
| 128 | + _this.end(); |
| 129 | + return false; |
| 130 | + }); |
| 131 | + $lightbox = $('#lightbox'); |
| 132 | + $lightbox.hide().on('click', function(e) { |
| 133 | + if ($(e.target).attr('id') === 'lightbox') _this.end(); |
| 134 | + return false; |
| 135 | + }); |
| 136 | + $lightbox.find('.lb-outerContainer').on('click', function(e) { |
| 137 | + if ($(e.target).attr('id') === 'lightbox') _this.end(); |
| 138 | + return false; |
| 139 | + }); |
| 140 | + $lightbox.find('.lb-prev').on('click', function(e) { |
| 141 | + _this.changeImage(_this.currentImageIndex - 1); |
| 142 | + return false; |
| 143 | + }); |
| 144 | + $lightbox.find('.lb-next').on('click', function(e) { |
| 145 | + _this.changeImage(_this.currentImageIndex + 1); |
| 146 | + return false; |
| 147 | + }); |
| 148 | + $lightbox.find('.lb-loader, .lb-close').on('click', function(e) { |
| 149 | + _this.end(); |
| 150 | + return false; |
| 151 | + }); |
| 152 | + }; |
| 153 | + |
| 154 | + Lightbox.prototype.start = function($link) { |
| 155 | + var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref; |
| 156 | + $(window).on("resize", this.sizeOverlay); |
| 157 | + $('select, object, embed').css({ |
| 158 | + visibility: "hidden" |
| 159 | + }); |
| 160 | + $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration); |
| 161 | + this.album = []; |
| 162 | + imageNumber = 0; |
| 163 | + if ($link.attr('rel') === 'lightbox') { |
| 164 | + this.album.push({ |
| 165 | + link: $link.attr('href'), |
| 166 | + title: $link.attr('title') |
| 167 | + }); |
| 168 | + } else { |
| 169 | + _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]'); |
| 170 | + for (i = 0, _len = _ref.length; i < _len; i++) { |
| 171 | + a = _ref[i]; |
| 172 | + this.album.push({ |
| 173 | + link: $(a).attr('href'), |
| 174 | + title: $(a).attr('title') |
| 175 | + }); |
| 176 | + if ($(a).attr('href') === $link.attr('href')) imageNumber = i; |
| 177 | + } |
| 178 | + } |
| 179 | + $window = $(window); |
| 180 | + top = $window.scrollTop() + $window.height() / 10; |
| 181 | + left = $window.scrollLeft(); |
| 182 | + $lightbox = $('#lightbox'); |
| 183 | + $lightbox.css({ |
| 184 | + top: top + 'px', |
| 185 | + left: left + 'px' |
| 186 | + }).fadeIn(this.options.fadeDuration); |
| 187 | + this.changeImage(imageNumber); |
| 188 | + }; |
| 189 | + |
| 190 | + Lightbox.prototype.changeImage = function(imageNumber) { |
| 191 | + var $image, $lightbox, preloader, |
| 192 | + _this = this; |
| 193 | + this.disableKeyboardNav(); |
| 194 | + $lightbox = $('#lightbox'); |
| 195 | + $image = $lightbox.find('.lb-image'); |
| 196 | + this.sizeOverlay(); |
| 197 | + $('#lightboxOverlay').fadeIn(this.options.fadeDuration); |
| 198 | + $('.loader').fadeIn('slow'); |
| 199 | + $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); |
| 200 | + $lightbox.find('.lb-outerContainer').addClass('animating'); |
| 201 | + preloader = new Image; |
| 202 | + preloader.onload = function() { |
| 203 | + $image.attr('src', _this.album[imageNumber].link); |
| 204 | + $image.width = preloader.width; |
| 205 | + $image.height = preloader.height; |
| 206 | + return _this.sizeContainer(preloader.width, preloader.height); |
| 207 | + }; |
| 208 | + preloader.src = this.album[imageNumber].link; |
| 209 | + this.currentImageIndex = imageNumber; |
| 210 | + }; |
| 211 | + |
| 212 | + Lightbox.prototype.sizeOverlay = function() { |
| 213 | + return $('#lightboxOverlay').width($(document).width()).height($(document).height()); |
| 214 | + }; |
| 215 | + |
| 216 | + Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { |
| 217 | + var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth, |
| 218 | + _this = this; |
| 219 | + $lightbox = $('#lightbox'); |
| 220 | + $outerContainer = $lightbox.find('.lb-outerContainer'); |
| 221 | + oldWidth = $outerContainer.outerWidth(); |
| 222 | + oldHeight = $outerContainer.outerHeight(); |
| 223 | + $container = $lightbox.find('.lb-container'); |
| 224 | + containerTopPadding = parseInt($container.css('padding-top'), 10); |
| 225 | + containerRightPadding = parseInt($container.css('padding-right'), 10); |
| 226 | + containerBottomPadding = parseInt($container.css('padding-bottom'), 10); |
| 227 | + containerLeftPadding = parseInt($container.css('padding-left'), 10); |
| 228 | + newWidth = imageWidth + containerLeftPadding + containerRightPadding; |
| 229 | + newHeight = imageHeight + containerTopPadding + containerBottomPadding; |
| 230 | + if (newWidth !== oldWidth && newHeight !== oldHeight) { |
| 231 | + $outerContainer.animate({ |
| 232 | + width: newWidth, |
| 233 | + height: newHeight |
| 234 | + }, this.options.resizeDuration, 'swing'); |
| 235 | + } else if (newWidth !== oldWidth) { |
| 236 | + $outerContainer.animate({ |
| 237 | + width: newWidth |
| 238 | + }, this.options.resizeDuration, 'swing'); |
| 239 | + } else if (newHeight !== oldHeight) { |
| 240 | + $outerContainer.animate({ |
| 241 | + height: newHeight |
| 242 | + }, this.options.resizeDuration, 'swing'); |
| 243 | + } |
| 244 | + setTimeout(function() { |
| 245 | + $lightbox.find('.lb-dataContainer').width(newWidth); |
| 246 | + $lightbox.find('.lb-prevLink').height(newHeight); |
| 247 | + $lightbox.find('.lb-nextLink').height(newHeight); |
| 248 | + _this.showImage(); |
| 249 | + }, this.options.resizeDuration); |
| 250 | + }; |
| 251 | + |
| 252 | + Lightbox.prototype.showImage = function() { |
| 253 | + var $lightbox; |
| 254 | + $lightbox = $('#lightbox'); |
| 255 | + $lightbox.find('.lb-loader').hide(); |
| 256 | + $lightbox.find('.lb-image').fadeIn('slow'); |
| 257 | + this.updateNav(); |
| 258 | + this.updateDetails(); |
| 259 | + this.preloadNeighboringImages(); |
| 260 | + this.enableKeyboardNav(); |
| 261 | + }; |
| 262 | + |
| 263 | + Lightbox.prototype.updateNav = function() { |
| 264 | + var $lightbox; |
| 265 | + $lightbox = $('#lightbox'); |
| 266 | + $lightbox.find('.lb-nav').show(); |
| 267 | + if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show(); |
| 268 | + if (this.currentImageIndex < this.album.length - 1) { |
| 269 | + $lightbox.find('.lb-next').show(); |
| 270 | + } |
| 271 | + }; |
| 272 | + |
| 273 | + Lightbox.prototype.updateDetails = function() { |
| 274 | + var $lightbox, |
| 275 | + _this = this; |
| 276 | + $lightbox = $('#lightbox'); |
| 277 | + if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") { |
| 278 | + $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast'); |
| 279 | + } |
| 280 | + if (this.album.length > 1) { |
| 281 | + $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast'); |
| 282 | + } else { |
| 283 | + $lightbox.find('.lb-number').hide(); |
| 284 | + } |
| 285 | + $lightbox.find('.lb-outerContainer').removeClass('animating'); |
| 286 | + $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() { |
| 287 | + return _this.sizeOverlay(); |
| 288 | + }); |
| 289 | + }; |
| 290 | + |
| 291 | + Lightbox.prototype.preloadNeighboringImages = function() { |
| 292 | + var preloadNext, preloadPrev; |
| 293 | + if (this.album.length > this.currentImageIndex + 1) { |
| 294 | + preloadNext = new Image; |
| 295 | + preloadNext.src = this.album[this.currentImageIndex + 1].link; |
| 296 | + } |
| 297 | + if (this.currentImageIndex > 0) { |
| 298 | + preloadPrev = new Image; |
| 299 | + preloadPrev.src = this.album[this.currentImageIndex - 1].link; |
| 300 | + } |
| 301 | + }; |
| 302 | + |
| 303 | + Lightbox.prototype.enableKeyboardNav = function() { |
| 304 | + $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); |
| 305 | + }; |
| 306 | + |
| 307 | + Lightbox.prototype.disableKeyboardNav = function() { |
| 308 | + $(document).off('.keyboard'); |
| 309 | + }; |
| 310 | + |
| 311 | + Lightbox.prototype.keyboardAction = function(event) { |
| 312 | + var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode; |
| 313 | + KEYCODE_ESC = 27; |
| 314 | + KEYCODE_LEFTARROW = 37; |
| 315 | + KEYCODE_RIGHTARROW = 39; |
| 316 | + keycode = event.keyCode; |
| 317 | + key = String.fromCharCode(keycode).toLowerCase(); |
| 318 | + if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { |
| 319 | + this.end(); |
| 320 | + } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) { |
| 321 | + if (this.currentImageIndex !== 0) { |
| 322 | + this.changeImage(this.currentImageIndex - 1); |
| 323 | + } |
| 324 | + } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) { |
| 325 | + if (this.currentImageIndex !== this.album.length - 1) { |
| 326 | + this.changeImage(this.currentImageIndex + 1); |
| 327 | + } |
| 328 | + } |
| 329 | + }; |
| 330 | + |
| 331 | + Lightbox.prototype.end = function() { |
| 332 | + this.disableKeyboardNav(); |
| 333 | + $(window).off("resize", this.sizeOverlay); |
| 334 | + $('#lightbox').fadeOut(this.options.fadeDuration); |
| 335 | + $('#lightboxOverlay').fadeOut(this.options.fadeDuration); |
| 336 | + return $('select, object, embed').css({ |
| 337 | + visibility: "visible" |
| 338 | + }); |
| 339 | + }; |
| 340 | + |
| 341 | + return Lightbox; |
| 342 | + |
| 343 | + })(); |
| 344 | + |
| 345 | + $(function() { |
| 346 | + var lightbox, options; |
| 347 | + options = new LightboxOptions; |
| 348 | + return lightbox = new Lightbox(options); |
| 349 | + }); |
| 350 | + |
| 351 | +}).call(this); |
0 commit comments