lightbox2 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: a7f69bc1750598b42f5a5756cc6f7afefb987a57d6d7fdebb6e89255bba9d458
4
+ data.tar.gz: aa5859f0ef73a34fbf3fd1bbbbdb4c64f4e788f4ed7fac7f0fa3db18e8c2f614
5
+ SHA512:
6
+ metadata.gz: 212fbfd41389df12ce516f45a8e26c080239db6777410f148673dcb763108fc136832f359aca8e700da064bbff7b4589fe1f22cd5c4baf03ce479929e9291d20
7
+ data.tar.gz: 13da5ad09f5ca9fb041f320a9962fa7a4edcdee673ed771853857b95de785569aec374c3beae604f4ed3070671b13aa470bc21b520a2d3990d84b4aac8657c41
data/README.md ADDED
@@ -0,0 +1,50 @@
1
+ # lightbox2 for Ruby on Rails
2
+ This ruby gem provides the latest version of lightbox2 for the Rails asset pipeline.
3
+
4
+ ## Installation
5
+
6
+ ### 1. Adding the gem to your Rails app
7
+ Require this Ruby gem in your Ruby on Rails app by adding the following line to your `Gemfile`:
8
+
9
+ ```
10
+ gem 'lightbox2', '~> 2.10.0'
11
+ ```
12
+
13
+ Install the ruby gem by running `bundle` in your Rails app directory.
14
+
15
+ ### 2. Activate the gem in your application.scss and application.js file
16
+
17
+ Rename your `app/assets/stylesheets/application.css` file to `application.scss` and put the following line at the end of this file:
18
+
19
+ ```scss
20
+ @import 'lightbox2';
21
+ ```
22
+
23
+ In case you renamed the file just right now, make sure that all of the pre-existing imports are using the same `@import` syntax as for `lightbox2`.
24
+
25
+ Open your `app/assets/javascripts/application.js` file and put the following lines at the end of your file:
26
+ ```
27
+ //= require jquery
28
+ //= require lightbox2
29
+ ```
30
+
31
+ Please make sure that `jquery` is always loaded before lightbox2!
32
+
33
+ **NOTE:** The Rails server needs to be restarted in order to make Rails aware of this new gem.
34
+
35
+ ### 3. Have fun!
36
+
37
+ lightbox2 is now ready and can be used within your Rails application!
38
+
39
+ You can copy and paste the following line somewhere in a `view` to test the lightbox:
40
+ ```ruby
41
+ <%= link_to 'my picture', image_path('my_picture.jpg'), data: { lightbox: 'my-lightbox-name', title: 'title or caption for this image' } %>
42
+ ```
43
+
44
+ Please refer to the `lightbox2` [author's documentation](https://lokeshdhakar.com/projects/lightbox2/#options) to see all available options.
45
+
46
+ ## License
47
+ This gem is licensed under the *MIT* license as the lightbox2 itself. Please visit the lightbox2 author's page in case the license has changed: https://lokeshdhakar.com/projects/lightbox2/#license
48
+
49
+ ## Credits
50
+ * Lokesh Dhakar (creator of lightbox2)
@@ -0,0 +1,6 @@
1
+ module Lightbox2
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module Lightbox2
2
+ module Rails
3
+ VERSION = '2.10.0'
4
+ end
5
+ end
@@ -0,0 +1,7 @@
1
+ require 'lightbox2/rails/engine'
2
+ require 'lightbox2/rails/version'
3
+
4
+ module Lightbox2
5
+ module Rails
6
+ end
7
+ end
data/lib/lightbox2.rb ADDED
@@ -0,0 +1 @@
1
+ require 'lightbox2/rails'
@@ -0,0 +1,519 @@
1
+ /*!
2
+ * Lightbox v2.10.0
3
+ * by Lokesh Dhakar
4
+ *
5
+ * More info:
6
+ * http://lokeshdhakar.com/projects/lightbox2/
7
+ *
8
+ * Copyright 2007, 2018 Lokesh Dhakar
9
+ * Released under the MIT license
10
+ * https://github.com/lokesh/lightbox2/blob/master/LICENSE
11
+ *
12
+ * @preserve
13
+ */
14
+
15
+ // Uses Node, AMD or browser globals to create a module.
16
+ (function (root, factory) {
17
+ if (typeof define === 'function' && define.amd) {
18
+ // AMD. Register as an anonymous module.
19
+ define(['jquery'], factory);
20
+ } else if (typeof exports === 'object') {
21
+ // Node. Does not work with strict CommonJS, but
22
+ // only CommonJS-like environments that support module.exports,
23
+ // like Node.
24
+ module.exports = factory(require('jquery'));
25
+ } else {
26
+ // Browser globals (root is window)
27
+ root.lightbox = factory(root.jQuery);
28
+ }
29
+ }(this, function ($) {
30
+
31
+ function Lightbox(options) {
32
+ this.album = [];
33
+ this.currentImageIndex = void 0;
34
+ this.init();
35
+
36
+ // options
37
+ this.options = $.extend({}, this.constructor.defaults);
38
+ this.option(options);
39
+ }
40
+
41
+ // Descriptions of all options available on the demo site:
42
+ // http://lokeshdhakar.com/projects/lightbox2/index.html#options
43
+ Lightbox.defaults = {
44
+ albumLabel: 'Image %1 of %2',
45
+ alwaysShowNavOnTouchDevices: false,
46
+ fadeDuration: 600,
47
+ fitImagesInViewport: true,
48
+ imageFadeDuration: 600,
49
+ // maxWidth: 800,
50
+ // maxHeight: 600,
51
+ positionFromTop: 50,
52
+ resizeDuration: 700,
53
+ showImageNumberLabel: true,
54
+ wrapAround: false,
55
+ disableScrolling: false,
56
+ /*
57
+ Sanitize Title
58
+ If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
59
+ This will free you to add html tags, such as links, in the caption.
60
+
61
+ If the caption data is user submitted or from some other untrusted source, then set this to true
62
+ to prevent xss and other injection attacks.
63
+ */
64
+ sanitizeTitle: false
65
+ };
66
+
67
+ Lightbox.prototype.option = function(options) {
68
+ $.extend(this.options, options);
69
+ };
70
+
71
+ Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
72
+ return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
73
+ };
74
+
75
+ Lightbox.prototype.init = function() {
76
+ var self = this;
77
+ // Both enable and build methods require the body tag to be in the DOM.
78
+ $(document).ready(function() {
79
+ self.enable();
80
+ self.build();
81
+ });
82
+ };
83
+
84
+ // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
85
+ // that contain 'lightbox'. When these are clicked, start lightbox.
86
+ Lightbox.prototype.enable = function() {
87
+ var self = this;
88
+ $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
89
+ self.start($(event.currentTarget));
90
+ return false;
91
+ });
92
+ };
93
+
94
+ // Build html for the lightbox and the overlay.
95
+ // Attach event handlers to the new DOM elements. click click click
96
+ Lightbox.prototype.build = function() {
97
+ if ($('#lightbox').length > 0) {
98
+ return;
99
+ }
100
+
101
+ var self = this;
102
+ $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><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"></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"></a></div></div></div></div>').appendTo($('body'));
103
+
104
+ // Cache jQuery objects
105
+ this.$lightbox = $('#lightbox');
106
+ this.$overlay = $('#lightboxOverlay');
107
+ this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
108
+ this.$container = this.$lightbox.find('.lb-container');
109
+ this.$image = this.$lightbox.find('.lb-image');
110
+ this.$nav = this.$lightbox.find('.lb-nav');
111
+
112
+ // Store css values for future lookup
113
+ this.containerPadding = {
114
+ top: parseInt(this.$container.css('padding-top'), 10),
115
+ right: parseInt(this.$container.css('padding-right'), 10),
116
+ bottom: parseInt(this.$container.css('padding-bottom'), 10),
117
+ left: parseInt(this.$container.css('padding-left'), 10)
118
+ };
119
+
120
+ this.imageBorderWidth = {
121
+ top: parseInt(this.$image.css('border-top-width'), 10),
122
+ right: parseInt(this.$image.css('border-right-width'), 10),
123
+ bottom: parseInt(this.$image.css('border-bottom-width'), 10),
124
+ left: parseInt(this.$image.css('border-left-width'), 10)
125
+ };
126
+
127
+ // Attach event handlers to the newly minted DOM elements
128
+ this.$overlay.hide().on('click', function() {
129
+ self.end();
130
+ return false;
131
+ });
132
+
133
+ this.$lightbox.hide().on('click', function(event) {
134
+ if ($(event.target).attr('id') === 'lightbox') {
135
+ self.end();
136
+ }
137
+ return false;
138
+ });
139
+
140
+ this.$outerContainer.on('click', function(event) {
141
+ if ($(event.target).attr('id') === 'lightbox') {
142
+ self.end();
143
+ }
144
+ return false;
145
+ });
146
+
147
+ this.$lightbox.find('.lb-prev').on('click', function() {
148
+ if (self.currentImageIndex === 0) {
149
+ self.changeImage(self.album.length - 1);
150
+ } else {
151
+ self.changeImage(self.currentImageIndex - 1);
152
+ }
153
+ return false;
154
+ });
155
+
156
+ this.$lightbox.find('.lb-next').on('click', function() {
157
+ if (self.currentImageIndex === self.album.length - 1) {
158
+ self.changeImage(0);
159
+ } else {
160
+ self.changeImage(self.currentImageIndex + 1);
161
+ }
162
+ return false;
163
+ });
164
+
165
+ /*
166
+ Show context menu for image on right-click
167
+
168
+ There is a div containing the navigation that spans the entire image and lives above of it. If
169
+ you right-click, you are right clicking this div and not the image. This prevents users from
170
+ saving the image or using other context menu actions with the image.
171
+
172
+ To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
173
+ set pointer-events to none on the nav div. This is so that the upcoming right-click event on
174
+ the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
175
+ we set the pointer events back to auto for the nav div so it can capture hover and left-click
176
+ events as usual.
177
+ */
178
+ this.$nav.on('mousedown', function(event) {
179
+ if (event.which === 3) {
180
+ self.$nav.css('pointer-events', 'none');
181
+
182
+ self.$lightbox.one('contextmenu', function() {
183
+ setTimeout(function() {
184
+ this.$nav.css('pointer-events', 'auto');
185
+ }.bind(self), 0);
186
+ });
187
+ }
188
+ });
189
+
190
+
191
+ this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
192
+ self.end();
193
+ return false;
194
+ });
195
+ };
196
+
197
+ // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
198
+ Lightbox.prototype.start = function($link) {
199
+ var self = this;
200
+ var $window = $(window);
201
+
202
+ $window.on('resize', $.proxy(this.sizeOverlay, this));
203
+
204
+ $('select, object, embed').css({
205
+ visibility: 'hidden'
206
+ });
207
+
208
+ this.sizeOverlay();
209
+
210
+ this.album = [];
211
+ var imageNumber = 0;
212
+
213
+ function addToAlbum($link) {
214
+ self.album.push({
215
+ alt: $link.attr('data-alt'),
216
+ link: $link.attr('href'),
217
+ title: $link.attr('data-title') || $link.attr('title')
218
+ });
219
+ }
220
+
221
+ // Support both data-lightbox attribute and rel attribute implementations
222
+ var dataLightboxValue = $link.attr('data-lightbox');
223
+ var $links;
224
+
225
+ if (dataLightboxValue) {
226
+ $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
227
+ for (var i = 0; i < $links.length; i = ++i) {
228
+ addToAlbum($($links[i]));
229
+ if ($links[i] === $link[0]) {
230
+ imageNumber = i;
231
+ }
232
+ }
233
+ } else {
234
+ if ($link.attr('rel') === 'lightbox') {
235
+ // If image is not part of a set
236
+ addToAlbum($link);
237
+ } else {
238
+ // If image is part of a set
239
+ $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
240
+ for (var j = 0; j < $links.length; j = ++j) {
241
+ addToAlbum($($links[j]));
242
+ if ($links[j] === $link[0]) {
243
+ imageNumber = j;
244
+ }
245
+ }
246
+ }
247
+ }
248
+
249
+ // Position Lightbox
250
+ var top = $window.scrollTop() + this.options.positionFromTop;
251
+ var left = $window.scrollLeft();
252
+ this.$lightbox.css({
253
+ top: top + 'px',
254
+ left: left + 'px'
255
+ }).fadeIn(this.options.fadeDuration);
256
+
257
+ // Disable scrolling of the page while open
258
+ if (this.options.disableScrolling) {
259
+ $('html').addClass('lb-disable-scrolling');
260
+ }
261
+
262
+ this.changeImage(imageNumber);
263
+ };
264
+
265
+ // Hide most UI elements in preparation for the animated resizing of the lightbox.
266
+ Lightbox.prototype.changeImage = function(imageNumber) {
267
+ var self = this;
268
+
269
+ this.disableKeyboardNav();
270
+ var $image = this.$lightbox.find('.lb-image');
271
+
272
+ this.$overlay.fadeIn(this.options.fadeDuration);
273
+
274
+ $('.lb-loader').fadeIn('slow');
275
+ this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
276
+
277
+ this.$outerContainer.addClass('animating');
278
+
279
+ // When image to show is preloaded, we send the width and height to sizeContainer()
280
+ var preloader = new Image();
281
+ preloader.onload = function() {
282
+ var $preloader;
283
+ var imageHeight;
284
+ var imageWidth;
285
+ var maxImageHeight;
286
+ var maxImageWidth;
287
+ var windowHeight;
288
+ var windowWidth;
289
+
290
+ $image.attr({
291
+ 'alt': self.album[imageNumber].alt,
292
+ 'src': self.album[imageNumber].link
293
+ });
294
+
295
+ $preloader = $(preloader);
296
+
297
+ $image.width(preloader.width);
298
+ $image.height(preloader.height);
299
+
300
+ if (self.options.fitImagesInViewport) {
301
+ // Fit image inside the viewport.
302
+ // Take into account the border around the image and an additional 10px gutter on each side.
303
+
304
+ windowWidth = $(window).width();
305
+ windowHeight = $(window).height();
306
+ maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
307
+ maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
308
+
309
+ // Check if image size is larger then maxWidth|maxHeight in settings
310
+ if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
311
+ maxImageWidth = self.options.maxWidth;
312
+ }
313
+ if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
314
+ maxImageHeight = self.options.maxHeight;
315
+ }
316
+
317
+ // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
318
+ // option than we need to size down while maintaining the aspect ratio.
319
+ if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
320
+ if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
321
+ imageWidth = maxImageWidth;
322
+ imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
323
+ $image.width(imageWidth);
324
+ $image.height(imageHeight);
325
+ } else {
326
+ imageHeight = maxImageHeight;
327
+ imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
328
+ $image.width(imageWidth);
329
+ $image.height(imageHeight);
330
+ }
331
+ }
332
+ }
333
+ self.sizeContainer($image.width(), $image.height());
334
+ };
335
+
336
+ preloader.src = this.album[imageNumber].link;
337
+ this.currentImageIndex = imageNumber;
338
+ };
339
+
340
+ // Stretch overlay to fit the viewport
341
+ Lightbox.prototype.sizeOverlay = function() {
342
+ this.$overlay
343
+ .width($(document).width())
344
+ .height($(document).height());
345
+ };
346
+
347
+ // Animate the size of the lightbox to fit the image we are showing
348
+ Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
349
+ var self = this;
350
+
351
+ var oldWidth = this.$outerContainer.outerWidth();
352
+ var oldHeight = this.$outerContainer.outerHeight();
353
+ var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
354
+ var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
355
+
356
+ function postResize() {
357
+ self.$lightbox.find('.lb-dataContainer').width(newWidth);
358
+ self.$lightbox.find('.lb-prevLink').height(newHeight);
359
+ self.$lightbox.find('.lb-nextLink').height(newHeight);
360
+ self.showImage();
361
+ }
362
+
363
+ if (oldWidth !== newWidth || oldHeight !== newHeight) {
364
+ this.$outerContainer.animate({
365
+ width: newWidth,
366
+ height: newHeight
367
+ }, this.options.resizeDuration, 'swing', function() {
368
+ postResize();
369
+ });
370
+ } else {
371
+ postResize();
372
+ }
373
+ };
374
+
375
+ // Display the image and its details and begin preload neighboring images.
376
+ Lightbox.prototype.showImage = function() {
377
+ this.$lightbox.find('.lb-loader').stop(true).hide();
378
+ this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
379
+
380
+ this.updateNav();
381
+ this.updateDetails();
382
+ this.preloadNeighboringImages();
383
+ this.enableKeyboardNav();
384
+ };
385
+
386
+ // Display previous and next navigation if appropriate.
387
+ Lightbox.prototype.updateNav = function() {
388
+ // Check to see if the browser supports touch events. If so, we take the conservative approach
389
+ // and assume that mouse hover events are not supported and always show prev/next navigation
390
+ // arrows in image sets.
391
+ var alwaysShowNav = false;
392
+ try {
393
+ document.createEvent('TouchEvent');
394
+ alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
395
+ } catch (e) {}
396
+
397
+ this.$lightbox.find('.lb-nav').show();
398
+
399
+ if (this.album.length > 1) {
400
+ if (this.options.wrapAround) {
401
+ if (alwaysShowNav) {
402
+ this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
403
+ }
404
+ this.$lightbox.find('.lb-prev, .lb-next').show();
405
+ } else {
406
+ if (this.currentImageIndex > 0) {
407
+ this.$lightbox.find('.lb-prev').show();
408
+ if (alwaysShowNav) {
409
+ this.$lightbox.find('.lb-prev').css('opacity', '1');
410
+ }
411
+ }
412
+ if (this.currentImageIndex < this.album.length - 1) {
413
+ this.$lightbox.find('.lb-next').show();
414
+ if (alwaysShowNav) {
415
+ this.$lightbox.find('.lb-next').css('opacity', '1');
416
+ }
417
+ }
418
+ }
419
+ }
420
+ };
421
+
422
+ // Display caption, image number, and closing button.
423
+ Lightbox.prototype.updateDetails = function() {
424
+ var self = this;
425
+
426
+ // Enable anchor clicks in the injected caption html.
427
+ // Thanks Nate Wright for the fix. @https://github.com/NateWr
428
+ if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
429
+ this.album[this.currentImageIndex].title !== '') {
430
+ var $caption = this.$lightbox.find('.lb-caption');
431
+ if (this.options.sanitizeTitle) {
432
+ $caption.text(this.album[this.currentImageIndex].title);
433
+ } else {
434
+ $caption.html(this.album[this.currentImageIndex].title);
435
+ }
436
+ $caption.fadeIn('fast')
437
+ .find('a').on('click', function(event) {
438
+ if ($(this).attr('target') !== undefined) {
439
+ window.open($(this).attr('href'), $(this).attr('target'));
440
+ } else {
441
+ location.href = $(this).attr('href');
442
+ }
443
+ });
444
+ }
445
+
446
+ if (this.album.length > 1 && this.options.showImageNumberLabel) {
447
+ var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
448
+ this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
449
+ } else {
450
+ this.$lightbox.find('.lb-number').hide();
451
+ }
452
+
453
+ this.$outerContainer.removeClass('animating');
454
+
455
+ this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
456
+ return self.sizeOverlay();
457
+ });
458
+ };
459
+
460
+ // Preload previous and next images in set.
461
+ Lightbox.prototype.preloadNeighboringImages = function() {
462
+ if (this.album.length > this.currentImageIndex + 1) {
463
+ var preloadNext = new Image();
464
+ preloadNext.src = this.album[this.currentImageIndex + 1].link;
465
+ }
466
+ if (this.currentImageIndex > 0) {
467
+ var preloadPrev = new Image();
468
+ preloadPrev.src = this.album[this.currentImageIndex - 1].link;
469
+ }
470
+ };
471
+
472
+ Lightbox.prototype.enableKeyboardNav = function() {
473
+ $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
474
+ };
475
+
476
+ Lightbox.prototype.disableKeyboardNav = function() {
477
+ $(document).off('.keyboard');
478
+ };
479
+
480
+ Lightbox.prototype.keyboardAction = function(event) {
481
+ var KEYCODE_ESC = 27;
482
+ var KEYCODE_LEFTARROW = 37;
483
+ var KEYCODE_RIGHTARROW = 39;
484
+
485
+ var keycode = event.keyCode;
486
+ var key = String.fromCharCode(keycode).toLowerCase();
487
+ if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
488
+ this.end();
489
+ } else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
490
+ if (this.currentImageIndex !== 0) {
491
+ this.changeImage(this.currentImageIndex - 1);
492
+ } else if (this.options.wrapAround && this.album.length > 1) {
493
+ this.changeImage(this.album.length - 1);
494
+ }
495
+ } else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
496
+ if (this.currentImageIndex !== this.album.length - 1) {
497
+ this.changeImage(this.currentImageIndex + 1);
498
+ } else if (this.options.wrapAround && this.album.length > 1) {
499
+ this.changeImage(0);
500
+ }
501
+ }
502
+ };
503
+
504
+ // Closing time. :-(
505
+ Lightbox.prototype.end = function() {
506
+ this.disableKeyboardNav();
507
+ $(window).off('resize', this.sizeOverlay);
508
+ this.$lightbox.fadeOut(this.options.fadeDuration);
509
+ this.$overlay.fadeOut(this.options.fadeDuration);
510
+ $('select, object, embed').css({
511
+ visibility: 'visible'
512
+ });
513
+ if (this.options.disableScrolling) {
514
+ $('html').removeClass('lb-disable-scrolling');
515
+ }
516
+ };
517
+
518
+ return new Lightbox();
519
+ }));
@@ -0,0 +1,207 @@
1
+ html.lb-disable-scrolling {
2
+ overflow: hidden;
3
+ /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
4
+ position: fixed;
5
+ height: 100vh;
6
+ width: 100vw;
7
+ }
8
+
9
+ .lightboxOverlay {
10
+ position: absolute;
11
+ top: 0;
12
+ left: 0;
13
+ z-index: 9999;
14
+ background-color: black;
15
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
16
+ opacity: 0.8;
17
+ display: none;
18
+ }
19
+
20
+ .lightbox {
21
+ position: absolute;
22
+ left: 0;
23
+ width: 100%;
24
+ z-index: 10000;
25
+ text-align: center;
26
+ line-height: 0;
27
+ font-weight: normal;
28
+ }
29
+
30
+ .lightbox .lb-image {
31
+ display: block;
32
+ height: auto;
33
+ max-width: inherit;
34
+ max-height: none;
35
+ border-radius: 3px;
36
+
37
+ /* Image border */
38
+ border: 4px solid white;
39
+ }
40
+
41
+ .lightbox a img {
42
+ border: none;
43
+ }
44
+
45
+ .lb-outerContainer {
46
+ position: relative;
47
+ *zoom: 1;
48
+ width: 250px;
49
+ height: 250px;
50
+ margin: 0 auto;
51
+ border-radius: 4px;
52
+
53
+ /* Background color behind image.
54
+ This is visible during transitions. */
55
+ background-color: white;
56
+ }
57
+
58
+ .lb-outerContainer:after {
59
+ content: "";
60
+ display: table;
61
+ clear: both;
62
+ }
63
+
64
+ .lb-loader {
65
+ position: absolute;
66
+ top: 43%;
67
+ left: 0;
68
+ height: 25%;
69
+ width: 100%;
70
+ text-align: center;
71
+ line-height: 0;
72
+ }
73
+
74
+ .lb-cancel {
75
+ display: block;
76
+ width: 32px;
77
+ height: 32px;
78
+ margin: 0 auto;
79
+ background: url(image_path('lightbox2/loading.gif')) no-repeat;
80
+ }
81
+
82
+ .lb-nav {
83
+ position: absolute;
84
+ top: 0;
85
+ left: 0;
86
+ height: 100%;
87
+ width: 100%;
88
+ z-index: 10;
89
+ }
90
+
91
+ .lb-container > .nav {
92
+ left: 0;
93
+ }
94
+
95
+ .lb-nav a {
96
+ outline: none;
97
+ background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
98
+ }
99
+
100
+ .lb-prev, .lb-next {
101
+ height: 100%;
102
+ cursor: pointer;
103
+ display: block;
104
+ }
105
+
106
+ .lb-nav a.lb-prev {
107
+ width: 34%;
108
+ left: 0;
109
+ float: left;
110
+ background: url(image_path('lightbox2/prev.png')) left 48% no-repeat;
111
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
112
+ opacity: 0;
113
+ -webkit-transition: opacity 0.6s;
114
+ -moz-transition: opacity 0.6s;
115
+ -o-transition: opacity 0.6s;
116
+ transition: opacity 0.6s;
117
+ }
118
+
119
+ .lb-nav a.lb-prev:hover {
120
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
121
+ opacity: 1;
122
+ }
123
+
124
+ .lb-nav a.lb-next {
125
+ width: 64%;
126
+ right: 0;
127
+ float: right;
128
+ background: url(image_path('lightbox2/next.png')) right 48% no-repeat;
129
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
130
+ opacity: 0;
131
+ -webkit-transition: opacity 0.6s;
132
+ -moz-transition: opacity 0.6s;
133
+ -o-transition: opacity 0.6s;
134
+ transition: opacity 0.6s;
135
+ }
136
+
137
+ .lb-nav a.lb-next:hover {
138
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
139
+ opacity: 1;
140
+ }
141
+
142
+ .lb-dataContainer {
143
+ margin: 0 auto;
144
+ padding-top: 5px;
145
+ *zoom: 1;
146
+ width: 100%;
147
+ border-bottom-left-radius: 4px;
148
+ border-bottom-right-radius: 4px;
149
+ }
150
+
151
+ .lb-dataContainer:after {
152
+ content: "";
153
+ display: table;
154
+ clear: both;
155
+ }
156
+
157
+ .lb-data {
158
+ padding: 0 4px;
159
+ color: #ccc;
160
+ }
161
+
162
+ .lb-data .lb-details {
163
+ width: 85%;
164
+ float: left;
165
+ text-align: left;
166
+ line-height: 1.1em;
167
+ }
168
+
169
+ .lb-data .lb-caption {
170
+ font-size: 13px;
171
+ font-weight: bold;
172
+ line-height: 1em;
173
+ }
174
+
175
+ .lb-data .lb-caption a {
176
+ color: #4ae;
177
+ }
178
+
179
+ .lb-data .lb-number {
180
+ display: block;
181
+ clear: left;
182
+ padding-bottom: 1em;
183
+ font-size: 12px;
184
+ color: #999999;
185
+ }
186
+
187
+ .lb-data .lb-close {
188
+ display: block;
189
+ float: right;
190
+ width: 30px;
191
+ height: 30px;
192
+ background: url(image_path('lightbox2/close.png')) top right no-repeat;
193
+ text-align: right;
194
+ outline: none;
195
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
196
+ opacity: 0.7;
197
+ -webkit-transition: opacity 0.2s;
198
+ -moz-transition: opacity 0.2s;
199
+ -o-transition: opacity 0.2s;
200
+ transition: opacity 0.2s;
201
+ }
202
+
203
+ .lb-data .lb-close:hover {
204
+ cursor: pointer;
205
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
206
+ opacity: 1;
207
+ }
metadata ADDED
@@ -0,0 +1,69 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: lightbox2
3
+ version: !ruby/object:Gem::Version
4
+ version: 2.10.0
5
+ platform: ruby
6
+ authors:
7
+ - Manuel Schnitzer
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2019-03-11 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jquery-rails
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: 3.1.3
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: 3.1.3
27
+ description: This gem for Ruby on Rails provides the lightbox2 library to Rails's
28
+ asset pipeline.
29
+ email: webmaster@mschnitzer.de
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - README.md
35
+ - lib/lightbox2.rb
36
+ - lib/lightbox2/rails.rb
37
+ - lib/lightbox2/rails/engine.rb
38
+ - lib/lightbox2/rails/version.rb
39
+ - vendor/assets/images/lightbox2/close.png
40
+ - vendor/assets/images/lightbox2/loading.gif
41
+ - vendor/assets/images/lightbox2/next.png
42
+ - vendor/assets/images/lightbox2/prev.png
43
+ - vendor/assets/javascripts/lightbox2.js
44
+ - vendor/assets/stylesheets/lightbox2.scss
45
+ homepage: https://github.com/mschnitzer/lightbox2-rubygem
46
+ licenses:
47
+ - MIT
48
+ metadata: {}
49
+ post_install_message:
50
+ rdoc_options: []
51
+ require_paths:
52
+ - lib
53
+ required_ruby_version: !ruby/object:Gem::Requirement
54
+ requirements:
55
+ - - ">="
56
+ - !ruby/object:Gem::Version
57
+ version: '0'
58
+ required_rubygems_version: !ruby/object:Gem::Requirement
59
+ requirements:
60
+ - - ">="
61
+ - !ruby/object:Gem::Version
62
+ version: '0'
63
+ requirements: []
64
+ rubyforge_project:
65
+ rubygems_version: 2.7.3
66
+ signing_key:
67
+ specification_version: 4
68
+ summary: lightbox2 for Ruby on Rails
69
+ test_files: []