lightbox2-rails 2.7.1 → 2.8.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +50 -25
- data/lib/lightbox2/rails/version.rb +1 -1
- data/vendor/assets/javascripts/lightbox.js +403 -361
- data/vendor/assets/stylesheets/{lightbox.css.erb → lightbox.scss} +206 -210
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 41d269c9d0d7a48a4d35abb45166ac601f4867f8
|
4
|
+
data.tar.gz: b3bb6321cf086d445078abccd10614cb9ecfdce8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 848d16ce55eeded42d818bbfb2f69b866668ab00b203046c26d296e8fa33d01a8d382fede1fa03e36160cf38600d3c615fc6231eb893e1af924262b6e7a3a514
|
7
|
+
data.tar.gz: 34b643a0b3f44bf084120483e3b265aeae9895d0c9a6040ba336b5c11d77b373ba173a86577394706c2a9ef29a19fd16e5472f8fe6b2741e88e2a732fadee57e
|
data/README.md
CHANGED
@@ -1,36 +1,61 @@
|
|
1
|
-
# lightbox2-rails
|
1
|
+
# :stars: lightbox2-rails
|
2
2
|
|
3
|
-
[
|
4
|
-
|
5
|
-
Lightbox2 version: 2.7.1
|
6
|
-
|
7
|
-
## Installation
|
3
|
+
[![Gem Version](http://img.shields.io/gem/v/lightbox2-rails.svg)](https://rubygems.org/gems/lightbox2-rails)
|
4
|
+
[![Gem Downloads](https://img.shields.io/gem/dt/lightbox2-rails.svg)](https://rubygems.org/gems/lightbox2-rails)
|
8
5
|
|
9
|
-
|
10
|
-
|
11
|
-
```ruby
|
12
|
-
gem 'lightbox2-rails'
|
13
|
-
```
|
14
|
-
|
15
|
-
Add to your `config/initializers/assets.rb` in order to have the images for lightbox precompiled:
|
16
|
-
```ruby
|
17
|
-
Rails.application.config.assets.precompile += %w( lightbox/* )
|
18
|
-
```
|
6
|
+
[Lightbox2](http://lokeshdhakar.com/projects/lightbox2) for Rails asset pipeline
|
19
7
|
|
20
|
-
|
8
|
+
- Modified for [Turbolinks](https://github.com/rails/turbolinks) and [Sprockets](https://github.com/sstephenson/sprockets)' asset digests compatibility
|
21
9
|
|
22
|
-
|
23
|
-
//= require lightbox
|
24
|
-
```
|
10
|
+
- Lightbox2 version: [2.8.2](https://github.com/lokesh/lightbox2/releases/tag/v2.8.2)
|
25
11
|
|
26
|
-
|
12
|
+
## Installation
|
27
13
|
|
28
|
-
|
29
|
-
|
30
|
-
```
|
14
|
+
1. Add to your `Gemfile` and install with bundler:
|
15
|
+
|
16
|
+
```ruby
|
17
|
+
gem 'lightbox2-rails'
|
18
|
+
```
|
19
|
+
|
20
|
+
```bash
|
21
|
+
bundle install
|
22
|
+
```
|
23
|
+
|
24
|
+
2. Add to your `config/initializers/assets.rb` in order to have the images for lightbox precompiled:
|
25
|
+
|
26
|
+
```ruby
|
27
|
+
Rails.application.config.assets.precompile += %w( lightbox/* )
|
28
|
+
```
|
29
|
+
|
30
|
+
3. Require the modified Lightbox2 javascript file in `app/assets/javascripts/application.js`:
|
31
|
+
|
32
|
+
```js
|
33
|
+
//= require lightbox
|
34
|
+
```
|
35
|
+
|
36
|
+
Or in `app/assets/javascripts/application.js.coffee`:
|
37
|
+
|
38
|
+
```coffeescript
|
39
|
+
#= require lightbox
|
40
|
+
```
|
41
|
+
|
42
|
+
4. Require the modified Lightbox2 css file in `app/assets/stylesheets/application.css`:
|
43
|
+
|
44
|
+
```css
|
45
|
+
*= require lightbox
|
46
|
+
```
|
47
|
+
Or in `app/assets/javascripts/application.css.scss` / `app/assets/javascripts/application.css.sass`:
|
48
|
+
|
49
|
+
```scss
|
50
|
+
@import lightbox;
|
51
|
+
```
|
52
|
+
|
53
|
+
```sass
|
54
|
+
@import lightbox
|
55
|
+
```
|
31
56
|
|
32
57
|
## Acknowledgements
|
33
58
|
|
34
59
|
[Lightbox2](http://lokeshdhakar.com/projects/lightbox2) created by Lokesh Dhakar, licensed under the [Creative Commons Attribution 2.5 License](http://creativecommons.org/licenses/by/2.5/)
|
35
60
|
|
36
|
-
Copyright [Gavin Lam](
|
61
|
+
Copyright [Gavin Lam](https://www.gavin.hk), released under the MIT License.
|
@@ -1,411 +1,453 @@
|
|
1
|
-
|
2
|
-
* Lightbox v2.
|
3
|
-
* by Lokesh Dhakar
|
1
|
+
/*!
|
2
|
+
* Lightbox v2.8.2
|
3
|
+
* by Lokesh Dhakar
|
4
4
|
*
|
5
|
-
*
|
6
|
-
*
|
7
|
-
*
|
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
|
8
11
|
*/
|
9
12
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
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
|
+
this.album = [];
|
31
|
+
this.currentImageIndex = void 0;
|
32
|
+
this.init();
|
33
|
+
|
34
|
+
// options
|
35
|
+
this.options = $.extend({}, this.constructor.defaults);
|
36
|
+
this.option(options);
|
37
|
+
}
|
38
|
+
|
39
|
+
// Descriptions of all options available on the demo site:
|
40
|
+
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
|
41
|
+
Lightbox.defaults = {
|
42
|
+
albumLabel: 'Image %1 of %2',
|
43
|
+
alwaysShowNavOnTouchDevices: false,
|
44
|
+
fadeDuration: 500,
|
45
|
+
fitImagesInViewport: true,
|
46
|
+
// maxWidth: 800,
|
47
|
+
// maxHeight: 600,
|
48
|
+
positionFromTop: 50,
|
49
|
+
resizeDuration: 700,
|
50
|
+
showImageNumberLabel: true,
|
51
|
+
wrapAround: false,
|
52
|
+
disableScrolling: false
|
53
|
+
};
|
54
|
+
|
55
|
+
Lightbox.prototype.option = function(options) {
|
56
|
+
$.extend(this.options, options);
|
57
|
+
};
|
58
|
+
|
59
|
+
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
|
60
|
+
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
|
61
|
+
};
|
62
|
+
|
63
|
+
Lightbox.prototype.init = function() {
|
64
|
+
this.enable();
|
65
|
+
this.build();
|
66
|
+
};
|
67
|
+
|
68
|
+
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
|
69
|
+
// that contain 'lightbox'. When these are clicked, start lightbox.
|
70
|
+
Lightbox.prototype.enable = function() {
|
71
|
+
var self = this;
|
72
|
+
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
|
73
|
+
self.start($(event.currentTarget));
|
74
|
+
return false;
|
75
|
+
});
|
76
|
+
};
|
77
|
+
|
78
|
+
// Build html for the lightbox and the overlay.
|
79
|
+
// Attach event handlers to the new DOM elements. click click click
|
80
|
+
Lightbox.prototype.build = function() {
|
81
|
+
var self = this;
|
82
|
+
$('<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'));
|
83
|
+
|
84
|
+
// Cache jQuery objects
|
85
|
+
this.$lightbox = $('#lightbox');
|
86
|
+
this.$overlay = $('#lightboxOverlay');
|
87
|
+
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
|
88
|
+
this.$container = this.$lightbox.find('.lb-container');
|
89
|
+
|
90
|
+
// Store css values for future lookup
|
91
|
+
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
|
92
|
+
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
|
93
|
+
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
|
94
|
+
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
|
95
|
+
|
96
|
+
// Attach event handlers to the newly minted DOM elements
|
97
|
+
this.$overlay.hide().on('click', function() {
|
98
|
+
self.end();
|
99
|
+
return false;
|
100
|
+
});
|
101
|
+
|
102
|
+
this.$lightbox.hide().on('click', function(event) {
|
103
|
+
if ($(event.target).attr('id') === 'lightbox') {
|
104
|
+
self.end();
|
105
|
+
}
|
106
|
+
return false;
|
107
|
+
});
|
29
108
|
|
30
|
-
|
31
|
-
|
109
|
+
this.$outerContainer.on('click', function(event) {
|
110
|
+
if ($(event.target).attr('id') === 'lightbox') {
|
111
|
+
self.end();
|
112
|
+
}
|
113
|
+
return false;
|
114
|
+
});
|
32
115
|
|
116
|
+
this.$lightbox.find('.lb-prev').on('click', function() {
|
117
|
+
if (self.currentImageIndex === 0) {
|
118
|
+
self.changeImage(self.album.length - 1);
|
119
|
+
} else {
|
120
|
+
self.changeImage(self.currentImageIndex - 1);
|
121
|
+
}
|
122
|
+
return false;
|
123
|
+
});
|
33
124
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
125
|
+
this.$lightbox.find('.lb-next').on('click', function() {
|
126
|
+
if (self.currentImageIndex === self.album.length - 1) {
|
127
|
+
self.changeImage(0);
|
128
|
+
} else {
|
129
|
+
self.changeImage(self.currentImageIndex + 1);
|
130
|
+
}
|
131
|
+
return false;
|
132
|
+
});
|
41
133
|
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
};
|
134
|
+
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
|
135
|
+
self.end();
|
136
|
+
return false;
|
137
|
+
});
|
138
|
+
};
|
46
139
|
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
|
52
|
-
self.start($(event.currentTarget));
|
53
|
-
return false;
|
54
|
-
});
|
55
|
-
};
|
140
|
+
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
141
|
+
Lightbox.prototype.start = function($link) {
|
142
|
+
var self = this;
|
143
|
+
var $window = $(window);
|
56
144
|
|
57
|
-
|
58
|
-
// Attach event handlers to the new DOM elements. click click click
|
59
|
-
Lightbox.prototype.build = function() {
|
60
|
-
var self = this;
|
61
|
-
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='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'></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'));
|
62
|
-
|
63
|
-
// Cache jQuery objects
|
64
|
-
this.$lightbox = $('#lightbox');
|
65
|
-
this.$overlay = $('#lightboxOverlay');
|
66
|
-
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
|
67
|
-
this.$container = this.$lightbox.find('.lb-container');
|
68
|
-
|
69
|
-
// Store css values for future lookup
|
70
|
-
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
|
71
|
-
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
|
72
|
-
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
|
73
|
-
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
|
74
|
-
|
75
|
-
// Attach event handlers to the newly minted DOM elements
|
76
|
-
this.$overlay.hide().on('click', function() {
|
77
|
-
self.end();
|
78
|
-
return false;
|
79
|
-
});
|
145
|
+
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
80
146
|
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
}
|
85
|
-
return false;
|
86
|
-
});
|
147
|
+
$('select, object, embed').css({
|
148
|
+
visibility: 'hidden'
|
149
|
+
});
|
87
150
|
|
88
|
-
|
89
|
-
if ($(event.target).attr('id') === 'lightbox') {
|
90
|
-
self.end();
|
91
|
-
}
|
92
|
-
return false;
|
93
|
-
});
|
151
|
+
this.sizeOverlay();
|
94
152
|
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
153
|
+
this.album = [];
|
154
|
+
var imageNumber = 0;
|
155
|
+
|
156
|
+
function addToAlbum($link) {
|
157
|
+
self.album.push({
|
158
|
+
link: $link.attr('href'),
|
159
|
+
title: $link.attr('data-title') || $link.attr('title')
|
102
160
|
});
|
161
|
+
}
|
103
162
|
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
163
|
+
// Support both data-lightbox attribute and rel attribute implementations
|
164
|
+
var dataLightboxValue = $link.attr('data-lightbox');
|
165
|
+
var $links;
|
166
|
+
|
167
|
+
if (dataLightboxValue) {
|
168
|
+
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
|
169
|
+
for (var i = 0; i < $links.length; i = ++i) {
|
170
|
+
addToAlbum($($links[i]));
|
171
|
+
if ($links[i] === $link[0]) {
|
172
|
+
imageNumber = i;
|
109
173
|
}
|
110
|
-
|
111
|
-
|
174
|
+
}
|
175
|
+
} else {
|
176
|
+
if ($link.attr('rel') === 'lightbox') {
|
177
|
+
// If image is not part of a set
|
178
|
+
addToAlbum($link);
|
179
|
+
} else {
|
180
|
+
// If image is part of a set
|
181
|
+
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
|
182
|
+
for (var j = 0; j < $links.length; j = ++j) {
|
183
|
+
addToAlbum($($links[j]));
|
184
|
+
if ($links[j] === $link[0]) {
|
185
|
+
imageNumber = j;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
}
|
189
|
+
}
|
112
190
|
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
191
|
+
// Position Lightbox
|
192
|
+
var top = $window.scrollTop() + this.options.positionFromTop;
|
193
|
+
var left = $window.scrollLeft();
|
194
|
+
this.$lightbox.css({
|
195
|
+
top: top + 'px',
|
196
|
+
left: left + 'px'
|
197
|
+
}).fadeIn(this.options.fadeDuration);
|
198
|
+
|
199
|
+
// Disable scrolling of the page while open
|
200
|
+
if (this.options.disableScrolling) {
|
201
|
+
$('body').addClass('lb-disable-scrolling');
|
202
|
+
}
|
118
203
|
|
119
|
-
|
120
|
-
|
121
|
-
var self = this;
|
122
|
-
var $window = $(window);
|
204
|
+
this.changeImage(imageNumber);
|
205
|
+
};
|
123
206
|
|
124
|
-
|
207
|
+
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
208
|
+
Lightbox.prototype.changeImage = function(imageNumber) {
|
209
|
+
var self = this;
|
125
210
|
|
126
|
-
|
127
|
-
|
128
|
-
});
|
211
|
+
this.disableKeyboardNav();
|
212
|
+
var $image = this.$lightbox.find('.lb-image');
|
129
213
|
|
130
|
-
|
214
|
+
this.$overlay.fadeIn(this.options.fadeDuration);
|
131
215
|
|
132
|
-
|
133
|
-
|
216
|
+
$('.lb-loader').fadeIn('slow');
|
217
|
+
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
134
218
|
|
135
|
-
|
136
|
-
self.album.push({
|
137
|
-
link: $link.attr('href'),
|
138
|
-
title: $link.attr('data-title') || $link.attr('title')
|
139
|
-
});
|
140
|
-
}
|
219
|
+
this.$outerContainer.addClass('animating');
|
141
220
|
|
142
|
-
|
143
|
-
|
144
|
-
|
221
|
+
// When image to show is preloaded, we send the width and height to sizeContainer()
|
222
|
+
var preloader = new Image();
|
223
|
+
preloader.onload = function() {
|
224
|
+
var $preloader;
|
225
|
+
var imageHeight;
|
226
|
+
var imageWidth;
|
227
|
+
var maxImageHeight;
|
228
|
+
var maxImageWidth;
|
229
|
+
var windowHeight;
|
230
|
+
var windowWidth;
|
145
231
|
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
232
|
+
$image.attr('src', self.album[imageNumber].link);
|
233
|
+
|
234
|
+
$preloader = $(preloader);
|
235
|
+
|
236
|
+
$image.width(preloader.width);
|
237
|
+
$image.height(preloader.height);
|
238
|
+
|
239
|
+
if (self.options.fitImagesInViewport) {
|
240
|
+
// Fit image inside the viewport.
|
241
|
+
// Take into account the border around the image and an additional 10px gutter on each side.
|
242
|
+
|
243
|
+
windowWidth = $(window).width();
|
244
|
+
windowHeight = $(window).height();
|
245
|
+
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
|
246
|
+
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
|
247
|
+
|
248
|
+
// Check if image size is larger then maxWidth|maxHeight in settings
|
249
|
+
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
|
250
|
+
maxImageWidth = self.options.maxWidth;
|
153
251
|
}
|
154
|
-
|
155
|
-
|
156
|
-
// If image is not part of a set
|
157
|
-
addToAlbum($link);
|
158
|
-
} else {
|
159
|
-
// If image is part of a set
|
160
|
-
$links = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
|
161
|
-
for (var j = 0; j < $links.length; j = ++j) {
|
162
|
-
addToAlbum($($links[j]));
|
163
|
-
if ($links[j] === $link[0]) {
|
164
|
-
imageNumber = j;
|
165
|
-
}
|
166
|
-
}
|
252
|
+
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
|
253
|
+
maxImageHeight = self.options.maxHeight;
|
167
254
|
}
|
168
|
-
}
|
169
|
-
|
170
|
-
// Position Lightbox
|
171
|
-
var top = $window.scrollTop() + this.options.positionFromTop;
|
172
|
-
var left = $window.scrollLeft();
|
173
|
-
this.$lightbox.css({
|
174
|
-
top: top + 'px',
|
175
|
-
left: left + 'px'
|
176
|
-
}).fadeIn(this.options.fadeDuration);
|
177
|
-
|
178
|
-
this.changeImage(imageNumber);
|
179
|
-
};
|
180
255
|
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
this.$outerContainer.addClass('animating');
|
194
|
-
|
195
|
-
// When image to show is preloaded, we send the width and height to sizeContainer()
|
196
|
-
var preloader = new Image();
|
197
|
-
preloader.onload = function() {
|
198
|
-
var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
|
199
|
-
$image.attr('src', self.album[imageNumber].link);
|
200
|
-
|
201
|
-
$preloader = $(preloader);
|
202
|
-
|
203
|
-
$image.width(preloader.width);
|
204
|
-
$image.height(preloader.height);
|
205
|
-
|
206
|
-
if (self.options.fitImagesInViewport) {
|
207
|
-
// Fit image inside the viewport.
|
208
|
-
// Take into account the border around the image and an additional 10px gutter on each side.
|
209
|
-
|
210
|
-
windowWidth = $(window).width();
|
211
|
-
windowHeight = $(window).height();
|
212
|
-
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
|
213
|
-
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
|
214
|
-
|
215
|
-
// Is there a fitting issue?
|
216
|
-
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
217
|
-
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
218
|
-
imageWidth = maxImageWidth;
|
219
|
-
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
220
|
-
$image.width(imageWidth);
|
221
|
-
$image.height(imageHeight);
|
222
|
-
} else {
|
223
|
-
imageHeight = maxImageHeight;
|
224
|
-
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
225
|
-
$image.width(imageWidth);
|
226
|
-
$image.height(imageHeight);
|
227
|
-
}
|
256
|
+
// Is there a fitting issue?
|
257
|
+
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
|
258
|
+
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
|
259
|
+
imageWidth = maxImageWidth;
|
260
|
+
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
|
261
|
+
$image.width(imageWidth);
|
262
|
+
$image.height(imageHeight);
|
263
|
+
} else {
|
264
|
+
imageHeight = maxImageHeight;
|
265
|
+
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
|
266
|
+
$image.width(imageWidth);
|
267
|
+
$image.height(imageHeight);
|
228
268
|
}
|
229
269
|
}
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
preloader.src = this.album[imageNumber].link;
|
234
|
-
this.currentImageIndex = imageNumber;
|
270
|
+
}
|
271
|
+
self.sizeContainer($image.width(), $image.height());
|
235
272
|
};
|
236
273
|
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
.width($(window).width())
|
241
|
-
.height($(document).height());
|
242
|
-
};
|
274
|
+
preloader.src = this.album[imageNumber].link;
|
275
|
+
this.currentImageIndex = imageNumber;
|
276
|
+
};
|
243
277
|
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
278
|
+
// Stretch overlay to fit the viewport
|
279
|
+
Lightbox.prototype.sizeOverlay = function() {
|
280
|
+
this.$overlay
|
281
|
+
.width($(document).width())
|
282
|
+
.height($(document).height());
|
283
|
+
};
|
284
|
+
|
285
|
+
// Animate the size of the lightbox to fit the image we are showing
|
286
|
+
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
287
|
+
var self = this;
|
288
|
+
|
289
|
+
var oldWidth = this.$outerContainer.outerWidth();
|
290
|
+
var oldHeight = this.$outerContainer.outerHeight();
|
291
|
+
var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
|
292
|
+
var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
|
293
|
+
|
294
|
+
function postResize() {
|
295
|
+
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
296
|
+
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
297
|
+
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
298
|
+
self.showImage();
|
299
|
+
}
|
259
300
|
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
postResize();
|
266
|
-
});
|
267
|
-
} else {
|
301
|
+
if (oldWidth !== newWidth || oldHeight !== newHeight) {
|
302
|
+
this.$outerContainer.animate({
|
303
|
+
width: newWidth,
|
304
|
+
height: newHeight
|
305
|
+
}, this.options.resizeDuration, 'swing', function() {
|
268
306
|
postResize();
|
269
|
-
}
|
270
|
-
}
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
this
|
295
|
-
|
296
|
-
|
297
|
-
|
307
|
+
});
|
308
|
+
} else {
|
309
|
+
postResize();
|
310
|
+
}
|
311
|
+
};
|
312
|
+
|
313
|
+
// Display the image and its details and begin preload neighboring images.
|
314
|
+
Lightbox.prototype.showImage = function() {
|
315
|
+
this.$lightbox.find('.lb-loader').stop(true).hide();
|
316
|
+
this.$lightbox.find('.lb-image').fadeIn('slow');
|
317
|
+
|
318
|
+
this.updateNav();
|
319
|
+
this.updateDetails();
|
320
|
+
this.preloadNeighboringImages();
|
321
|
+
this.enableKeyboardNav();
|
322
|
+
};
|
323
|
+
|
324
|
+
// Display previous and next navigation if appropriate.
|
325
|
+
Lightbox.prototype.updateNav = function() {
|
326
|
+
// Check to see if the browser supports touch events. If so, we take the conservative approach
|
327
|
+
// and assume that mouse hover events are not supported and always show prev/next navigation
|
328
|
+
// arrows in image sets.
|
329
|
+
var alwaysShowNav = false;
|
330
|
+
try {
|
331
|
+
document.createEvent('TouchEvent');
|
332
|
+
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
|
333
|
+
} catch (e) {}
|
334
|
+
|
335
|
+
this.$lightbox.find('.lb-nav').show();
|
336
|
+
|
337
|
+
if (this.album.length > 1) {
|
338
|
+
if (this.options.wrapAround) {
|
339
|
+
if (alwaysShowNav) {
|
340
|
+
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
|
341
|
+
}
|
342
|
+
this.$lightbox.find('.lb-prev, .lb-next').show();
|
343
|
+
} else {
|
344
|
+
if (this.currentImageIndex > 0) {
|
345
|
+
this.$lightbox.find('.lb-prev').show();
|
298
346
|
if (alwaysShowNav) {
|
299
|
-
this.$lightbox.find('.lb-prev
|
300
|
-
}
|
301
|
-
this.$lightbox.find('.lb-prev, .lb-next').show();
|
302
|
-
} else {
|
303
|
-
if (this.currentImageIndex > 0) {
|
304
|
-
this.$lightbox.find('.lb-prev').show();
|
305
|
-
if (alwaysShowNav) {
|
306
|
-
this.$lightbox.find('.lb-prev').css('opacity', '1');
|
307
|
-
}
|
347
|
+
this.$lightbox.find('.lb-prev').css('opacity', '1');
|
308
348
|
}
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
349
|
+
}
|
350
|
+
if (this.currentImageIndex < this.album.length - 1) {
|
351
|
+
this.$lightbox.find('.lb-next').show();
|
352
|
+
if (alwaysShowNav) {
|
353
|
+
this.$lightbox.find('.lb-next').css('opacity', '1');
|
314
354
|
}
|
315
355
|
}
|
316
356
|
}
|
317
|
-
}
|
357
|
+
}
|
358
|
+
};
|
318
359
|
|
319
|
-
|
320
|
-
|
321
|
-
|
360
|
+
// Display caption, image number, and closing button.
|
361
|
+
Lightbox.prototype.updateDetails = function() {
|
362
|
+
var self = this;
|
322
363
|
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
this
|
364
|
+
// Enable anchor clicks in the injected caption html.
|
365
|
+
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
366
|
+
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
|
367
|
+
this.album[this.currentImageIndex].title !== '') {
|
368
|
+
this.$lightbox.find('.lb-caption')
|
327
369
|
.html(this.album[this.currentImageIndex].title)
|
328
370
|
.fadeIn('fast')
|
329
|
-
.find('a').on('click', function(event){
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
|
336
|
-
} else {
|
337
|
-
this.$lightbox.find('.lb-number').hide();
|
338
|
-
}
|
339
|
-
|
340
|
-
this.$outerContainer.removeClass('animating');
|
341
|
-
|
342
|
-
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
|
343
|
-
return self.sizeOverlay();
|
371
|
+
.find('a').on('click', function(event) {
|
372
|
+
if ($(this).attr('target') !== undefined) {
|
373
|
+
window.open($(this).attr('href'), $(this).attr('target'));
|
374
|
+
} else {
|
375
|
+
location.href = $(this).attr('href');
|
376
|
+
}
|
344
377
|
});
|
345
|
-
}
|
378
|
+
}
|
346
379
|
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
if (this.currentImageIndex > 0) {
|
354
|
-
var preloadPrev = new Image();
|
355
|
-
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
356
|
-
}
|
357
|
-
};
|
380
|
+
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
381
|
+
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
|
382
|
+
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
|
383
|
+
} else {
|
384
|
+
this.$lightbox.find('.lb-number').hide();
|
385
|
+
}
|
358
386
|
|
359
|
-
|
360
|
-
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
361
|
-
};
|
387
|
+
this.$outerContainer.removeClass('animating');
|
362
388
|
|
363
|
-
|
364
|
-
|
365
|
-
};
|
389
|
+
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
|
390
|
+
return self.sizeOverlay();
|
391
|
+
});
|
392
|
+
};
|
366
393
|
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
var
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
394
|
+
// Preload previous and next images in set.
|
395
|
+
Lightbox.prototype.preloadNeighboringImages = function() {
|
396
|
+
if (this.album.length > this.currentImageIndex + 1) {
|
397
|
+
var preloadNext = new Image();
|
398
|
+
preloadNext.src = this.album[this.currentImageIndex + 1].link;
|
399
|
+
}
|
400
|
+
if (this.currentImageIndex > 0) {
|
401
|
+
var preloadPrev = new Image();
|
402
|
+
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
403
|
+
}
|
404
|
+
};
|
405
|
+
|
406
|
+
Lightbox.prototype.enableKeyboardNav = function() {
|
407
|
+
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
408
|
+
};
|
409
|
+
|
410
|
+
Lightbox.prototype.disableKeyboardNav = function() {
|
411
|
+
$(document).off('.keyboard');
|
412
|
+
};
|
413
|
+
|
414
|
+
Lightbox.prototype.keyboardAction = function(event) {
|
415
|
+
var KEYCODE_ESC = 27;
|
416
|
+
var KEYCODE_LEFTARROW = 37;
|
417
|
+
var KEYCODE_RIGHTARROW = 39;
|
418
|
+
|
419
|
+
var keycode = event.keyCode;
|
420
|
+
var key = String.fromCharCode(keycode).toLowerCase();
|
421
|
+
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
|
422
|
+
this.end();
|
423
|
+
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
|
424
|
+
if (this.currentImageIndex !== 0) {
|
425
|
+
this.changeImage(this.currentImageIndex - 1);
|
426
|
+
} else if (this.options.wrapAround && this.album.length > 1) {
|
427
|
+
this.changeImage(this.album.length - 1);
|
388
428
|
}
|
389
|
-
}
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
429
|
+
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
|
430
|
+
if (this.currentImageIndex !== this.album.length - 1) {
|
431
|
+
this.changeImage(this.currentImageIndex + 1);
|
432
|
+
} else if (this.options.wrapAround && this.album.length > 1) {
|
433
|
+
this.changeImage(0);
|
434
|
+
}
|
435
|
+
}
|
436
|
+
};
|
437
|
+
|
438
|
+
// Closing time. :-(
|
439
|
+
Lightbox.prototype.end = function() {
|
440
|
+
this.disableKeyboardNav();
|
441
|
+
$(window).off('resize', this.sizeOverlay);
|
442
|
+
this.$lightbox.fadeOut(this.options.fadeDuration);
|
443
|
+
this.$overlay.fadeOut(this.options.fadeDuration);
|
444
|
+
$('select, object, embed').css({
|
445
|
+
visibility: 'visible'
|
446
|
+
});
|
447
|
+
if (this.options.disableScrolling) {
|
448
|
+
$('body').removeClass('lb-disable-scrolling');
|
449
|
+
}
|
450
|
+
};
|
410
451
|
|
411
|
-
|
452
|
+
return new Lightbox();
|
453
|
+
}));
|