https://www.sympaatti.fi/media/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 = '/media/images/lightbox/loading.gif';
51      this.fileCloseImage = '/media/images/lightbox/sulje.png';
52      this.resizeDuration = 700;
53      this.fadeDuration = 500;
54      this.labelImage = "Kuva";
55      this.labelOf = "/";
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 id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + this.options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + this.options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));
88      $('#lightboxOverlay').hide().on('click', function(e) {
89        _this.end();
90        return false;
91      });
92      $lightbox = $('#lightbox');
93      $lightbox.hide().on('click', function(e) {
94        if ($(e.target).attr('id') === 'lightbox') _this.end();
95        return false;
96      });
97      $lightbox.find('.lb-outerContainer').on('click', function(e) {
98        if ($(e.target).attr('id') === 'lightbox') _this.end();
99        return false;
100      });
101      $lightbox.find('.lb-prev').on('click', function(e) {
102        _this.changeImage(_this.currentImageIndex - 1);
103        return false;
104      });
105      $lightbox.find('.lb-next').on('click', function(e) {
106        _this.changeImage(_this.currentImageIndex + 1);
107        return false;
108      });
109      $lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
110        _this.end();
111        return false;
112      });
113    };
114
115    Lightbox.prototype.start = function($link) {
116      var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
117      $(window).on("resize", this.sizeOverlay);
118      $('select, object, embed').css({
119        visibility: "hidden"
120      });
121      $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
122      this.album = [];
123      imageNumber = 0;
124      if ($link.attr('rel') === 'lightbox') {
125        this.album.push({
126          link: $link.attr('href'),
127          title: $link.attr('title')
128        });
129      } else {
130        _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
131        for (i = 0, _len = _ref.length; i < _len; i++) {
132          a = _ref[i];
133          this.album.push({
134            link: $(a).attr('href'),
135            title: $(a).attr('title')
136          });
137          if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
138        }
139      }
140      $window = $(window);
141      top = $window.scrollTop() + $window.height() / 10;
142      left = $window.scrollLeft();
143      $lightbox = $('#lightbox');
144      $lightbox.css({
145        top: top + 'px',
146        left: left + 'px'
147      }).fadeIn(this.options.fadeDuration);
148      this.changeImage(imageNumber);
149    };
150
151    Lightbox.prototype.changeImage = function(imageNumber) {
152      var $image, $lightbox, preloader,
153        _this = this;
154      this.disableKeyboardNav();
155      $lightbox = $('#lightbox');
156      $image = $lightbox.find('.lb-image');
157      this.sizeOverlay();
158      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
159      $('.loader').fadeIn('slow');
160      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
161      $lightbox.find('.lb-outerContainer').addClass('animating');
162      preloader = new Image;
163      preloader.onload = function() {
164        $image.attr('src', _this.album[imageNumber].link);
165        $image.width = preloader.width;
166        $image.height = preloader.height;
167        return _this.sizeContainer(preloader.width, preloader.height);
168      };
169      preloader.src = this.album[imageNumber].link;
170      this.currentImageIndex = imageNumber;
171    };
172
173    Lightbox.prototype.sizeOverlay = function() {
174      return $('#lightboxOverlay').width($(document).width()).height($(document).height());
175    };
176
177    Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
178      var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
179        _this = this;
180      $lightbox = $('#lightbox');
181      $outerContainer = $lightbox.find('.lb-outerContainer');
182      oldWidth = $outerContainer.outerWidth();
183      oldHeight = $outerContainer.outerHeight();
184      $container = $lightbox.find('.lb-container');
185      containerTopPadding = parseInt($container.css('padding-top'), 10);
186      containerRightPadding = parseInt($container.css('padding-right'), 10);
187      containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
188      containerLeftPadding = parseInt($container.css('padding-left'), 10);
189      newWidth = imageWidth + containerLeftPadding + containerRightPadding;
190      newHeight = imageHeight + containerTopPadding + containerBottomPadding;
191      if (newWidth !== oldWidth && newHeight !== oldHeight) {
192        $outerContainer.animate({
193          width: newWidth,
194          height: newHeight
195        }, this.options.resizeDuration, 'swing');
196      } else if (newWidth !== oldWidth) {
197        $outerContainer.animate({
198          width: newWidth
199        }, this.options.resizeDuration, 'swing');
200      } else if (newHeight !== oldHeight) {
201        $outerContainer.animate({
202          height: newHeight
203        }, this.options.resizeDuration, 'swing');
204      }
205      setTimeout(function() {
206        $lightbox.find('.lb-dataContainer').width(newWidth);
207        $lightbox.find('.lb-prevLink').height(newHeight);
208        $lightbox.find('.lb-nextLink').height(newHeight);
209        _this.showImage();
210      }, this.options.resizeDuration);
211    };
212
213    Lightbox.prototype.showImage = function() {
214      var $lightbox;
215      $lightbox = $('#lightbox');
216      $lightbox.find('.lb-loader').hide();
217      $lightbox.find('.lb-image').fadeIn('slow');
218      this.updateNav();
219      this.updateDetails();
220      this.preloadNeighboringImages();
221      this.enableKeyboardNav();
222    };
223
224    Lightbox.prototype.updateNav = function() {
225      var $lightbox;
226      $lightbox = $('#lightbox');
227      $lightbox.find('.lb-nav').show();
228      if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
229      if (this.currentImageIndex < this.album.length - 1) {
230        $lightbox.find('.lb-next').show();
231      }
232    };
233
234    Lightbox.prototype.updateDetails = function() {
235      var $lightbox,
236        _this = this;
237      $lightbox = $('#lightbox');
238      if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
239        $lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
240      }
241      if (this.album.length > 1) {
242        $lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + '  ' + this.album.length).fadeIn('fast');
243      } else {
244        $lightbox.find('.lb-number').hide();
245      }
246      $lightbox.find('.lb-outerContainer').removeClass('animating');
247      $lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
248        return _this.sizeOverlay();
249      });
250    };
251
252    Lightbox.prototype.preloadNeighboringImages = function() {
253      var preloadNext, preloadPrev;
254      if (this.album.length > this.currentImageIndex + 1) {
255        preloadNext = new Image;
256        preloadNext.src = this.album[this.currentImageIndex + 1].link;
257      }
258      if (this.currentImageIndex > 0) {
259        preloadPrev = new Image;
260        preloadPrev.src = this.album[this.currentImageIndex - 1].link;
261      }
262    };
263
264    Lightbox.prototype.enableKeyboardNav = function() {
265      $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
266    };
267
268    Lightbox.prototype.disableKeyboardNav = function() {
269      $(document).off('.keyboard');
270    };
271
272    Lightbox.prototype.keyboardAction = function(event) {
273      var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
274      KEYCODE_ESC = 27;
275      KEYCODE_LEFTARROW = 37;
276      KEYCODE_RIGHTARROW = 39;
277      keycode = event.keyCode;
278      key = String.fromCharCode(keycode).toLowerCase();
279      if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
280        this.end();
281      } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
282        if (this.currentImageIndex !== 0) {
283          this.changeImage(this.currentImageIndex - 1);
284        }
285      } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
286        if (this.currentImageIndex !== this.album.length - 1) {
287          this.changeImage(this.currentImageIndex + 1);
288        }
289      }
290    };
291
292    Lightbox.prototype.end = function() {
293      this.disableKeyboardNav();
294      $(window).off("resize", this.sizeOverlay);
295      $('#lightbox').fadeOut(this.options.fadeDuration);
296      $('#lightboxOverlay').fadeOut(this.options.fadeDuration);
297      return $('select, object, embed').css({
298        visibility: "visible"
299      });
300    };
301
302    return Lightbox;
303
304  })();
305
306  $(function() {
307    var lightbox, options;
308    options = new LightboxOptions;
309    return lightbox = new Lightbox(options);
310  });
311
312}).call(this);