http://www.ztn.com.pl/var/js/lightbox.js

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

343
344  $(function() {
345    var lightbox, options;
346    options = new LightboxOptions;
347    return lightbox = new Lightbox(options);
348  });
349
350}).call(this);