https://www.metropoliakrakowska.pl/js/plugins/lightbox/lightbox.js

1/*!
2 * Lightbox v2.8.2
3 * by Lokesh Dhakar
4 *
5 * More info:
6 * http://lokeshdhakar.com/projects/lightbox2/
7 *
8 * Copyright 2007, 2015 Lokesh Dhakar
9 * Released under the MIT license
10 * https://github.com/lokesh/lightbox2/blob/master/LICENSE
11 */
12
13// Uses Node, AMD or browser globals to create a module.
14(function (root, factory) {
15    if (typeof define === 'function' && define.amd) {
16        // AMD. Register as an anonymous module.
17        define(['jquery'], factory);
18    } else if (typeof exports === 'object') {
19        // Node. Does not work with strict CommonJS, but
20        // only CommonJS-like environments that support module.exports,
21        // like Node.
22        module.exports = factory(require('jquery'));
23    } else {
24        // Browser globals (root is window)
25        root.lightbox = factory(root.jQuery);
26    }
27}(this, function ($) {
28
29  function Lightbox(options) {
30    var obj = this;
31    this.album = [];
32    this.currentImageIndex = void 0;
33    $(document).ready(
34        function() {
35          obj.init();
36          // options
37          obj.options = $.extend({}, obj.constructor.defaults);
38          obj.option(options);
39        }
40    );
41
42
43
44  }
45
46  // Descriptions of all options available on the demo site:
47  // http://lokeshdhakar.com/projects/lightbox2/index.html#options
48  Lightbox.defaults = {
49    albumLabel: 'Zdjęcie %1 z %2',
50    alwaysShowNavOnTouchDevices: false,
51    fadeDuration: 500,
52    fitImagesInViewport: true,
53    // maxWidth: 800,
54    // maxHeight: 600,
55    positionFromTop: 20,
56    resizeDuration: 700,
57    showImageNumberLabel: true,
58    wrapAround: false,
59    disableScrolling: false
60  };
61
62  Lightbox.prototype.option = function(options) {
63    $.extend(this.options, options);
64  };
65
66  Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
67    return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
68  };
69
70  Lightbox.prototype.init = function() {
71    this.enable();
72    this.build();
73  };
74
75  // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
76  // that contain 'lightbox'. When these are clicked, start lightbox.
77  Lightbox.prototype.enable = function() {
78    var self = this;
79    $('body').on('click', 'a a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
80      self.start($(event.currentTarget));
81      return false;
82    });
83  };
84
85  // Build html for the lightbox and the overlay.
86  // Attach event handlers to the new DOM elements. click click click
87  Lightbox.prototype.build = function() {
88    var self = this;
89      $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox">' +
90          '<div class="lb-dataContainer">' +
91          '<div class="lb-data">' +
92          '<div class="lb-closeContainer"><a class="lb-close"></a>' +
93          '</div></div></div>'+
94          '<div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" alt="tekst do spięcia w CMS" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ><span class="sr-only">następne zdjęcie</span></a><a class="lb-next" href="" ><span class="sr-only">poprzednie zdjęcie</span></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div>' +
95          '<div class="lb-dataContainer">' +
96          '<div class="lb-data">' +
97          '<div class="lb-details">' +
98          '<span class="lb-caption"></span>' +
99          '<span class="lb-number"></span>' +
100          '</div>' +
101          '<div class="lb-download-container">' +
102          '<span class="lb-download"><a class="lb-download-a" href="" download="plik">Pobierz</a></span>' +
103          '</div>' +
104          '</div></div></div>').appendTo($('body'));
105
106    // Cache jQuery objects
107    this.$lightbox       = $('#lightbox');
108    this.$overlay        = $('#lightboxOverlay');
109    this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
110    this.$container      = this.$lightbox.find('.lb-container');
111
112    // Store css values for future lookup
113    this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
114    this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
115    this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
116    this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
117
118    // Attach event handlers to the newly minted DOM elements
119    this.$overlay.hide().on('click', function() {
120      self.end();
121      return false;

122    });
123
124    this.$lightbox.hide().on('click', function(event) {
125      if ($(event.target).attr('id') === 'lightbox') {
126        self.end();
127      }
128      if ($(event.target).attr('class') === 'lb-download-a') {
129          return true;
130      }
131    return false;
132    });
133
134    this.$outerContainer.on('click', function(event) {
135      if ($(event.target).attr('id') === 'lightbox') {
136        self.end();
137      }
138      return false;
139    });
140
141    this.$lightbox.find('.lb-prev').on('click', function() {
142      if (self.currentImageIndex === 0) {
143        self.changeImage(self.album.length - 1);
144      } else {
145        self.changeImage(self.currentImageIndex - 1);
146      }
147      return false;
148    });
149
150    this.$lightbox.find('.lb-next').on('click', function() {
151      if (self.currentImageIndex === self.album.length - 1) {
152        self.changeImage(0);
153      } else {
154        self.changeImage(self.currentImageIndex + 1);
155      }
156      return false;
157    });
158
159    this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
160      self.end();
161      return false;
162    });
163  };
164
165  // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
166  Lightbox.prototype.start = function($link) {
167    var self    = this;
168    var $window = $(window);
169
170    $window.on('resize', $.proxy(this.sizeOverlay, this));
171
172    $('select, object, embed').css({
173      visibility: 'hidden'
174    });
175
176    this.sizeOverlay();
177
178    this.album = [];
179    var imageNumber = 0;
180
181    function addToAlbum($link) {
182      self.album.push({
183        link: $link.attr('href'),
184          alt: $link.attr('data-alt'),
185          fullimage: $link.attr('data-fullimage'),
186        title: $link.attr('data-title') || $link.attr('title')
187      });
188    }
189
190    // Support both data-lightbox attribute and rel attribute implementations
191    var dataLightboxValue = $link.attr('data-lightbox');
192    var $links;
193
194    if (dataLightboxValue) {
195      $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
196      for (var i = 0; i < $links.length; i = ++i) {
197        addToAlbum($($links[i]));
198        if ($links[i] === $link[0]) {
199          imageNumber = i;
200        }
201      }
202    } else {
203      if ($link.attr('rel') === 'lightbox') {
204        // If image is not part of a set
205        addToAlbum($link);
206      } else {
207        // If image is part of a set
208        $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
209        for (var j = 0; j < $links.length; j = ++j) {
210          addToAlbum($($links[j]));
211          if ($links[j] === $link[0]) {
212            imageNumber = j;
213          }
214        }
215      }
216    }
217
218    // Position Lightbox
219    var top  = $window.scrollTop() + this.options.positionFromTop;
220    var left = $window.scrollLeft();
221    this.$lightbox.css({
222      top: top + 'px',
223      left: left + 'px'
224    }).fadeIn(this.options.fadeDuration);
225
226    // Disable scrolling of the page while open
227    if (this.options.disableScrolling) {
228      $('body').addClass('lb-disable-scrolling');
229    }
230
231    this.changeImage(imageNumber);
232  };
233
234  // Hide most UI elements in preparation for the animated resizing of the lightbox.
235  Lightbox.prototype.changeImage = function(imageNumber) {
236    var self = this;
237
238    this.disableKeyboardNav();
239    var $image = this.$lightbox.find('.lb-image');
240
241    this.$overlay.fadeIn(this.options.fadeDuration);
242
243    $('.lb-loader').fadeIn('slow');
244    this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
245
246    this.$outerContainer.addClass('animating');
247
248    // When image to show is preloaded, we send the width and height to sizeContainer()
249    var preloader = new Image();
250    preloader.onload = function() {
251      var $preloader;
252      var imageHeight;
253      var imageWidth;
254      var maxImageHeight;
255      var maxImageWidth;
256      var windowHeight;
257      var windowWidth;
258
259      $image.attr('src', self.album[imageNumber].link);
260      $image.attr('alt', self.album[imageNumber].alt);
261
262      $preloader = $(preloader);
263
264      $image.width(preloader.width);
265      $image.height(preloader.height);
266
267      if (self.options.fitImagesInViewport) {
268        // Fit image inside the viewport.
269        // Take into account the border around the image and an additional 10px gutter on each side.
270
271        windowWidth    = $(window).width();
272        windowHeight   = $(window).height();
273        maxImageWidth  = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
274        maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
275
276        // Check if image size is larger then maxWidth|maxHeight in settings
277        if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
278          maxImageWidth = self.options.maxWidth;
279        }
280        if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
281          maxImageHeight = self.options.maxHeight;
282        }
283
284        // Is there a fitting issue?
285        if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
286          if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
287            imageWidth  = maxImageWidth;
288            imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
289            $image.width(imageWidth);
290            $image.height(imageHeight);
291          } else {
292            imageHeight = maxImageHeight;
293            imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
294            $image.width(imageWidth);
295            $image.height(imageHeight);
296          }
297        }
298      }
299      self.sizeContainer($image.width(), $image.height());
300    };
301
302    preloader.src = this.album[imageNumber].link;
303    preloader.alt = this.album[imageNumber].alt;
304    this.$lightbox.find('.lb-download-a').attr('href', this.album[imageNumber].fullimage);
305    this.currentImageIndex = imageNumber;
306  };
307
308  // Stretch overlay to fit the viewport
309  Lightbox.prototype.sizeOverlay = function() {
310    this.$overlay
311      .width($(document).width())
312      .height($(document).height());
313  };
314
315  // Animate the size of the lightbox to fit the image we are showing
316  Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
317    var self = this;
318
319    var oldWidth  = this.$outerContainer.outerWidth();
320    var oldHeight = this.$outerContainer.outerHeight();
321    var newWidth  = imageWidth + this.containerLeftPadding + this.containerRightPadding;
322    var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
323
324    function postResize() {
325      self.$lightbox.find('.lb-dataContainer').width(newWidth);
326      self.$lightbox.find('.lb-prevLink').height(newHeight);
327      self.$lightbox.find('.lb-nextLink').height(newHeight);
328      self.showImage();
329    }
330
331    if (oldWidth !== newWidth || oldHeight !== newHeight) {
332      this.$outerContainer.animate({
333        width: newWidth,
334        height: newHeight
335      }, this.options.resizeDuration, 'swing', function() {
336        postResize();
337      });
338    } else {
339      postResize();
340    }
341  };
342
343  // Display the image and its details and begin preload neighboring images.
344  Lightbox.prototype.showImage = function() {
345    this.$lightbox.find('.lb-loader').stop(true).hide();
346    this.$lightbox.find('.lb-image').fadeIn('slow');
347
348    this.updateNav();
349    this.updateDetails();
350    this.preloadNeighboringImages();
351    this.enableKeyboardNav();
352  };
353
354  // Display previous and next navigation if appropriate.
355  Lightbox.prototype.updateNav = function() {
356    // Check to see if the browser supports touch events. If so, we take the conservative approach
357    // and assume that mouse hover events are not supported and always show prev/next navigation
358    // arrows in image sets.
359    var alwaysShowNav = false;

360    try {
361      document.createEvent('TouchEvent');
362      alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
363    } catch (e) {}
364
365    this.$lightbox.find('.lb-nav').show();
366
367    if (this.album.length > 1) {
368      if (this.options.wrapAround) {
369        if (alwaysShowNav) {
370          this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
371        }
372        this.$lightbox.find('.lb-prev, .lb-next').show();
373      } else {
374        if (this.currentImageIndex > 0) {
375          this.$lightbox.find('.lb-prev').show();
376          if (alwaysShowNav) {
377            this.$lightbox.find('.lb-prev').css('opacity', '1');
378          }
379        }
380        if (this.currentImageIndex < this.album.length - 1) {
381          this.$lightbox.find('.lb-next').show();
382          if (alwaysShowNav) {
383            this.$lightbox.find('.lb-next').css('opacity', '1');
384          }
385        }
386      }
387    }
388  };
389
390  // Display caption, image number, and closing button.
391  Lightbox.prototype.updateDetails = function() {
392    var self = this;
393
394    // Enable anchor clicks in the injected caption html.
395    // Thanks Nate Wright for the fix. @https://github.com/NateWr
396    if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
397      this.album[this.currentImageIndex].title !== '') {
398      this.$lightbox.find('.lb-caption')
399        .html(this.album[this.currentImageIndex].title)
400        .fadeIn('fast')
401        .find('a').on('click', function(event) {
402          if ($(this).attr('target') !== undefined) {
403            window.open($(this).attr('href'), $(this).attr('target'));
404          } else {
405            location.href = $(this).attr('href');
406          }
407        });
408    }
409
410    if (this.album.length > 1 && this.options.showImageNumberLabel) {
411      var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
412      this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
413    } else {
414      this.$lightbox.find('.lb-number').hide();
415    }
416
417    this.$outerContainer.removeClass('animating');
418
419    this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
420      return self.sizeOverlay();
421    });
422  };
423
424  // Preload previous and next images in set.
425  Lightbox.prototype.preloadNeighboringImages = function() {
426      if (this.album.length > this.currentImageIndex + 1) {
427      var preloadNext = new Image();
428      preloadNext.src = this.album[this.currentImageIndex + 1].link;
429      preloadNext.alt = this.album[this.currentImageIndex + 1].alt;
430    }
431    if (this.currentImageIndex > 0) {
432      var preloadPrev = new Image();
433      preloadPrev.src = this.album[this.currentImageIndex - 1].link;
434      preloadPrev.alt = this.album[this.currentImageIndex - 1].alt;
435    }
436  };
437
438  Lightbox.prototype.enableKeyboardNav = function() {
439    $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
440  };
441
442  Lightbox.prototype.disableKeyboardNav = function() {
443    $(document).off('.keyboard');
444  };
445
446  Lightbox.prototype.keyboardAction = function(event) {
447    var KEYCODE_ESC        = 27;
448    var KEYCODE_LEFTARROW  = 37;
449    var KEYCODE_RIGHTARROW = 39;
450
451    var keycode = event.keyCode;
452    var key     = String.fromCharCode(keycode).toLowerCase();
453    if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
454      this.end();
455    } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
456      if (this.currentImageIndex !== 0) {
457        this.changeImage(this.currentImageIndex - 1);
458      } else if (this.options.wrapAround && this.album.length > 1) {
459        this.changeImage(this.album.length - 1);
460      }
461    } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
462      if (this.currentImageIndex !== this.album.length - 1) {
463        this.changeImage(this.currentImageIndex + 1);
464      } else if (this.options.wrapAround && this.album.length > 1) {
465        this.changeImage(0);
466      }
467    }
468  };
469
470  // Closing time. :-(
471  Lightbox.prototype.end = function() {
472    this.disableKeyboardNav();
473    $(window).off('resize', this.sizeOverlay);
474    this.$lightbox.fadeOut(this.options.fadeDuration);
475    this.$overlay.fadeOut(this.options.fadeDuration);
476    $('select, object, embed').css({
477      visibility: 'visible'
478    });
479    if (this.options.disableScrolling) {
480      $('body').removeClass('lb-disable-scrolling');
481    }
482  };
483
484  return new Lightbox();
485}));