lightbox2 2.10.0.1 → 2.11.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +24 -0
- data/README.md +1 -1
- data/lib/lightbox2/rails/version.rb +2 -2
- data/vendor/assets/images/close.png +0 -0
- data/vendor/assets/images/loading.gif +0 -0
- data/vendor/assets/images/next.png +0 -0
- data/vendor/assets/images/prev.png +0 -0
- data/vendor/assets/javascripts/lightbox2.js +94 -57
- data/vendor/assets/stylesheets/lightbox2.scss +2 -5
- metadata +8 -9
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ea407e1dda07a26a65941114b36bf194b52b660ac3dbd64a9f7b8fa9e6c21da9
|
4
|
+
data.tar.gz: 25a34b1d0e268e9f0c4d206a5e2e0c2d2c862882d7e73b2d1ba1e4d18e593de4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f0c212d160249f7c7e5f65b9922e1bd417aa357acab6a630127048b7c2a03c1698b92bc0d66dc9bf706678cce0b86c0d5be4171332e8c8131dc4d7f58f91fe6f
|
7
|
+
data.tar.gz: 62897c2b29f162a789b5380a8c98982374a5683a4243981e98e7250d15a9bc854f37dbb7ab63639e3f376b66774ca79b1c8307c9c2825a14c1a3a02b9e79cd47
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
# Release 2.11.1.1
|
2
|
+
|
3
|
+
* Fixed LIGHTBOX2_VERSION and VERSION constants (The values were not updated for the last release)
|
4
|
+
|
5
|
+
# Release 2.11.1
|
6
|
+
|
7
|
+
* Updated to upstream lightbox2 version 2.11.1 (https://github.com/lokesh/lightbox2/releases/tag/v2.11.1)
|
8
|
+
|
9
|
+
# Release 2.11.0
|
10
|
+
|
11
|
+
* Updated to upstream lightbox2 version 2.11.0 (https://github.com/lokesh/lightbox2/releases/tag/v2.11.0)
|
12
|
+
|
13
|
+
# Release 2.10.0.2
|
14
|
+
|
15
|
+
* Fix: Wrong version of `jquery-rails` was required within the gemspec file
|
16
|
+
|
17
|
+
# Release 2.10.0.1
|
18
|
+
|
19
|
+
* Fixes an issue when lightbox2 is being used in combination with turbolinks
|
20
|
+
|
21
|
+
# Release 2.10.0
|
22
|
+
|
23
|
+
This release provides the latest version of lightbox2 (2.10.0):
|
24
|
+
https://lokeshdhakar.com/projects/lightbox2
|
data/README.md
CHANGED
@@ -7,7 +7,7 @@ This ruby gem provides the latest version of [lightbox2](https://github.com/loke
|
|
7
7
|
Require this Ruby gem in your Ruby on Rails app by adding the following line to your `Gemfile`:
|
8
8
|
|
9
9
|
```
|
10
|
-
gem 'lightbox2'
|
10
|
+
gem 'lightbox2'
|
11
11
|
```
|
12
12
|
|
13
13
|
Install the ruby gem by running `bundle` in your Rails app directory.
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -1,11 +1,11 @@
|
|
1
1
|
/*!
|
2
|
-
* Lightbox v2.
|
2
|
+
* Lightbox v2.11.3
|
3
3
|
* by Lokesh Dhakar
|
4
4
|
*
|
5
5
|
* More info:
|
6
6
|
* http://lokeshdhakar.com/projects/lightbox2/
|
7
7
|
*
|
8
|
-
* Copyright
|
8
|
+
* Copyright Lokesh Dhakar
|
9
9
|
* Released under the MIT license
|
10
10
|
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
11
11
|
*
|
@@ -99,7 +99,19 @@
|
|
99
99
|
}
|
100
100
|
|
101
101
|
var self = this;
|
102
|
-
|
102
|
+
|
103
|
+
// The two root notes generated, #lightboxOverlay and #lightbox are given
|
104
|
+
// tabindex attrs so they are focusable. We attach our keyboard event
|
105
|
+
// listeners to these two elements, and not the document. Clicking anywhere
|
106
|
+
// while Lightbox is opened will keep the focus on or inside one of these
|
107
|
+
// two elements.
|
108
|
+
//
|
109
|
+
// We do this so we can prevent propogation of the Esc keypress when
|
110
|
+
// Lightbox is open. This prevents it from intefering with other components
|
111
|
+
// on the page below.
|
112
|
+
//
|
113
|
+
// Github issue: https://github.com/lokesh/lightbox2/issues/663
|
114
|
+
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" 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
115
|
|
104
116
|
// Cache jQuery objects
|
105
117
|
this.$lightbox = $('#lightbox');
|
@@ -134,7 +146,6 @@
|
|
134
146
|
if ($(event.target).attr('id') === 'lightbox') {
|
135
147
|
self.end();
|
136
148
|
}
|
137
|
-
return false;
|
138
149
|
});
|
139
150
|
|
140
151
|
this.$outerContainer.on('click', function(event) {
|
@@ -201,10 +212,6 @@
|
|
201
212
|
|
202
213
|
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
203
214
|
|
204
|
-
$('select, object, embed').css({
|
205
|
-
visibility: 'hidden'
|
206
|
-
});
|
207
|
-
|
208
215
|
this.sizeOverlay();
|
209
216
|
|
210
217
|
this.album = [];
|
@@ -256,7 +263,7 @@
|
|
256
263
|
|
257
264
|
// Disable scrolling of the page while open
|
258
265
|
if (this.options.disableScrolling) {
|
259
|
-
$('
|
266
|
+
$('body').addClass('lb-disable-scrolling');
|
260
267
|
}
|
261
268
|
|
262
269
|
this.changeImage(imageNumber);
|
@@ -265,15 +272,17 @@
|
|
265
272
|
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
266
273
|
Lightbox.prototype.changeImage = function(imageNumber) {
|
267
274
|
var self = this;
|
275
|
+
var filename = this.album[imageNumber].link;
|
276
|
+
var filetype = filename.split('.').slice(-1)[0];
|
277
|
+
var $image = this.$lightbox.find('.lb-image');
|
268
278
|
|
279
|
+
// Disable keyboard nav during transitions
|
269
280
|
this.disableKeyboardNav();
|
270
|
-
var $image = this.$lightbox.find('.lb-image');
|
271
281
|
|
282
|
+
// Show loading state
|
272
283
|
this.$overlay.fadeIn(this.options.fadeDuration);
|
273
|
-
|
274
284
|
$('.lb-loader').fadeIn('slow');
|
275
285
|
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
276
|
-
|
277
286
|
this.$outerContainer.addClass('animating');
|
278
287
|
|
279
288
|
// When image to show is preloaded, we send the width and height to sizeContainer()
|
@@ -289,62 +298,90 @@
|
|
289
298
|
|
290
299
|
$image.attr({
|
291
300
|
'alt': self.album[imageNumber].alt,
|
292
|
-
'src':
|
301
|
+
'src': filename
|
293
302
|
});
|
294
303
|
|
295
304
|
$preloader = $(preloader);
|
296
305
|
|
297
306
|
$image.width(preloader.width);
|
298
307
|
$image.height(preloader.height);
|
308
|
+
windowWidth = $(window).width();
|
309
|
+
windowHeight = $(window).height();
|
310
|
+
|
311
|
+
// Calculate the max image dimensions for the current viewport.
|
312
|
+
// Take into account the border around the image and an additional 10px gutter on each side.
|
313
|
+
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
|
314
|
+
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
|
315
|
+
|
316
|
+
/*
|
317
|
+
Since many SVGs have small intrinsic dimensions, but they support scaling
|
318
|
+
up without quality loss because of their vector format, max out their
|
319
|
+
size.
|
320
|
+
*/
|
321
|
+
if (filetype === 'svg') {
|
322
|
+
$image.width(maxImageWidth);
|
323
|
+
$image.height(maxImageHeight);
|
324
|
+
}
|
299
325
|
|
326
|
+
// Fit image inside the viewport.
|
300
327
|
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
328
|
|
309
329
|
// Check if image size is larger then maxWidth|maxHeight in settings
|
310
330
|
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
311
331
|
maxImageWidth = self.options.maxWidth;
|
312
332
|
}
|
313
|
-
if (self.options.maxHeight && self.options.maxHeight <
|
333
|
+
if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
|
314
334
|
maxImageHeight = self.options.maxHeight;
|
315
335
|
}
|
316
336
|
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
337
|
+
} else {
|
338
|
+
maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
|
339
|
+
maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
|
340
|
+
}
|
341
|
+
|
342
|
+
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
|
343
|
+
// option than we need to size down while maintaining the aspect ratio.
|
344
|
+
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
345
|
+
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
346
|
+
imageWidth = maxImageWidth;
|
347
|
+
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
348
|
+
$image.width(imageWidth);
|
349
|
+
$image.height(imageHeight);
|
350
|
+
} else {
|
351
|
+
imageHeight = maxImageHeight;
|
352
|
+
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
353
|
+
$image.width(imageWidth);
|
354
|
+
$image.height(imageHeight);
|
331
355
|
}
|
332
356
|
}
|
333
357
|
self.sizeContainer($image.width(), $image.height());
|
334
358
|
};
|
335
359
|
|
336
|
-
|
360
|
+
// Preload image before showing
|
361
|
+
preloader.src = this.album[imageNumber].link;
|
337
362
|
this.currentImageIndex = imageNumber;
|
338
363
|
};
|
339
364
|
|
340
365
|
// Stretch overlay to fit the viewport
|
341
366
|
Lightbox.prototype.sizeOverlay = function() {
|
342
|
-
this
|
343
|
-
|
344
|
-
|
367
|
+
var self = this;
|
368
|
+
/*
|
369
|
+
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
|
370
|
+
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
|
371
|
+
tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
|
372
|
+
hidden before we measure the document width, as the presence of the scrollbar will affect the
|
373
|
+
number.
|
374
|
+
*/
|
375
|
+
setTimeout(function() {
|
376
|
+
self.$overlay
|
377
|
+
.width($(document).width())
|
378
|
+
.height($(document).height());
|
379
|
+
|
380
|
+
}, 0);
|
345
381
|
};
|
346
382
|
|
347
383
|
// Animate the size of the lightbox to fit the image we are showing
|
384
|
+
// This method also shows the the image.
|
348
385
|
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
349
386
|
var self = this;
|
350
387
|
|
@@ -357,6 +394,10 @@
|
|
357
394
|
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
358
395
|
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
359
396
|
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
397
|
+
|
398
|
+
// Set focus on one of the two root nodes so keyboard events are captured.
|
399
|
+
self.$overlay.focus();
|
400
|
+
|
360
401
|
self.showImage();
|
361
402
|
}
|
362
403
|
|
@@ -433,14 +474,7 @@
|
|
433
474
|
} else {
|
434
475
|
$caption.html(this.album[this.currentImageIndex].title);
|
435
476
|
}
|
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
|
-
});
|
477
|
+
$caption.fadeIn('fast');
|
444
478
|
}
|
445
479
|
|
446
480
|
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
@@ -470,11 +504,13 @@
|
|
470
504
|
};
|
471
505
|
|
472
506
|
Lightbox.prototype.enableKeyboardNav = function() {
|
473
|
-
|
507
|
+
this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
508
|
+
this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
474
509
|
};
|
475
510
|
|
476
511
|
Lightbox.prototype.disableKeyboardNav = function() {
|
477
|
-
|
512
|
+
this.$lightbox.off('.keyboard');
|
513
|
+
this.$overlay.off('.keyboard');
|
478
514
|
};
|
479
515
|
|
480
516
|
Lightbox.prototype.keyboardAction = function(event) {
|
@@ -483,16 +519,17 @@
|
|
483
519
|
var KEYCODE_RIGHTARROW = 39;
|
484
520
|
|
485
521
|
var keycode = event.keyCode;
|
486
|
-
|
487
|
-
|
522
|
+
if (keycode === KEYCODE_ESC) {
|
523
|
+
// Prevent bubbling so as to not affect other components on the page.
|
524
|
+
event.stopPropagation();
|
488
525
|
this.end();
|
489
|
-
} else if (
|
526
|
+
} else if (keycode === KEYCODE_LEFTARROW) {
|
490
527
|
if (this.currentImageIndex !== 0) {
|
491
528
|
this.changeImage(this.currentImageIndex - 1);
|
492
529
|
} else if (this.options.wrapAround && this.album.length > 1) {
|
493
530
|
this.changeImage(this.album.length - 1);
|
494
531
|
}
|
495
|
-
} else if (
|
532
|
+
} else if (keycode === KEYCODE_RIGHTARROW) {
|
496
533
|
if (this.currentImageIndex !== this.album.length - 1) {
|
497
534
|
this.changeImage(this.currentImageIndex + 1);
|
498
535
|
} else if (this.options.wrapAround && this.album.length > 1) {
|
@@ -507,17 +544,17 @@
|
|
507
544
|
$(window).off('resize', this.sizeOverlay);
|
508
545
|
this.$lightbox.fadeOut(this.options.fadeDuration);
|
509
546
|
this.$overlay.fadeOut(this.options.fadeDuration);
|
510
|
-
|
511
|
-
visibility: 'visible'
|
512
|
-
});
|
547
|
+
|
513
548
|
if (this.options.disableScrolling) {
|
514
|
-
$('
|
549
|
+
$('body').removeClass('lb-disable-scrolling');
|
515
550
|
}
|
516
551
|
};
|
517
552
|
|
518
553
|
return new Lightbox();
|
519
554
|
}));
|
520
555
|
|
556
|
+
// The lightbox has to be (re-)initiated, when the 'load' event of Rails Turobolinks gets fired, otherwise
|
557
|
+
// it won't work when navigating to another page
|
521
558
|
$(document).on('turbolinks:load', function(event) {
|
522
559
|
lightbox.init();
|
523
560
|
});
|
@@ -1,9 +1,5 @@
|
|
1
|
-
|
1
|
+
body.lb-disable-scrolling {
|
2
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
3
|
}
|
8
4
|
|
9
5
|
.lightboxOverlay {
|
@@ -25,6 +21,7 @@ html.lb-disable-scrolling {
|
|
25
21
|
text-align: center;
|
26
22
|
line-height: 0;
|
27
23
|
font-weight: normal;
|
24
|
+
outline: none;
|
28
25
|
}
|
29
26
|
|
30
27
|
.lightbox .lb-image {
|
metadata
CHANGED
@@ -1,22 +1,19 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: lightbox2
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.
|
4
|
+
version: 2.11.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Manuel Schnitzer
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2021-02-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: jquery-rails
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
|
-
- - "~>"
|
18
|
-
- !ruby/object:Gem::Version
|
19
|
-
version: '3.1'
|
20
17
|
- - ">="
|
21
18
|
- !ruby/object:Gem::Version
|
22
19
|
version: 3.1.3
|
@@ -24,9 +21,6 @@ dependencies:
|
|
24
21
|
prerelease: false
|
25
22
|
version_requirements: !ruby/object:Gem::Requirement
|
26
23
|
requirements:
|
27
|
-
- - "~>"
|
28
|
-
- !ruby/object:Gem::Version
|
29
|
-
version: '3.1'
|
30
24
|
- - ">="
|
31
25
|
- !ruby/object:Gem::Version
|
32
26
|
version: 3.1.3
|
@@ -37,15 +31,20 @@ executables: []
|
|
37
31
|
extensions: []
|
38
32
|
extra_rdoc_files: []
|
39
33
|
files:
|
34
|
+
- CHANGELOG.md
|
40
35
|
- README.md
|
41
36
|
- lib/lightbox2.rb
|
42
37
|
- lib/lightbox2/rails.rb
|
43
38
|
- lib/lightbox2/rails/engine.rb
|
44
39
|
- lib/lightbox2/rails/version.rb
|
40
|
+
- vendor/assets/images/close.png
|
45
41
|
- vendor/assets/images/lightbox2/close.png
|
46
42
|
- vendor/assets/images/lightbox2/loading.gif
|
47
43
|
- vendor/assets/images/lightbox2/next.png
|
48
44
|
- vendor/assets/images/lightbox2/prev.png
|
45
|
+
- vendor/assets/images/loading.gif
|
46
|
+
- vendor/assets/images/next.png
|
47
|
+
- vendor/assets/images/prev.png
|
49
48
|
- vendor/assets/javascripts/lightbox2.js
|
50
49
|
- vendor/assets/stylesheets/lightbox2.scss
|
51
50
|
homepage: https://github.com/mschnitzer/lightbox2-rubygem
|
@@ -68,7 +67,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
68
67
|
version: '0'
|
69
68
|
requirements: []
|
70
69
|
rubyforge_project:
|
71
|
-
rubygems_version: 2.7.
|
70
|
+
rubygems_version: 2.7.6.2
|
72
71
|
signing_key:
|
73
72
|
specification_version: 4
|
74
73
|
summary: lightbox2 for Ruby on Rails
|