lightbox2-rails 2.7.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +20 -0
- data/README.md +36 -0
- data/lib/lightbox2-rails.rb +1 -0
- data/lib/lightbox2/rails.rb +7 -0
- data/lib/lightbox2/rails/engine.rb +6 -0
- data/lib/lightbox2/rails/version.rb +5 -0
- data/vendor/assets/images/lightbox/close.png +0 -0
- data/vendor/assets/images/lightbox/loading.gif +0 -0
- data/vendor/assets/images/lightbox/next.png +0 -0
- data/vendor/assets/images/lightbox/prev.png +0 -0
- data/vendor/assets/javascripts/lightbox.js +411 -0
- data/vendor/assets/stylesheets/lightbox.css.erb +210 -0
- metadata +70 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 7a67988d020cae69618153abad54fc507dbf0067
|
4
|
+
data.tar.gz: e098b0d7683a66a03754d4f848bcf5ea3b243942
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 3efc54e397d4c4e6631e1dbe998b5a6c1c782e1e197fa074f8710cd016ff0c9becec80f9a4a990b79a2ab20bf607e4c561633c20f70bd517c5949109acc92363
|
7
|
+
data.tar.gz: f4ae1e35fe397f392ac036357af86c3699ff8696ba5ba51daea41340ace4fa3ba4da2a90cad7bd04e375746ff387ba723079cba3764deddc562f61ec386b670f
|
data/LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2014 Gavin Lam
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
# lightbox2-rails
|
2
|
+
|
3
|
+
[Lightbox2](http://lokeshdhakar.com/projects/lightbox2) for Rails asset pipeline
|
4
|
+
|
5
|
+
Lightbox2 version: 2.7.1
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add to your `Gemfile` and install with bundler:
|
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
|
+
```
|
19
|
+
|
20
|
+
Require the Lightbox2 javascript file in `app/assets/javascripts/application.js`:
|
21
|
+
|
22
|
+
```js
|
23
|
+
//= require lightbox
|
24
|
+
```
|
25
|
+
|
26
|
+
Require the modified Lightbox2 css file in `app/assets/stylesheets/application.css`:
|
27
|
+
|
28
|
+
```css
|
29
|
+
*= require lightbox
|
30
|
+
```
|
31
|
+
|
32
|
+
## Acknowledgements
|
33
|
+
|
34
|
+
[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
|
+
|
36
|
+
Copyright [Gavin Lam](http://gavin.hk), released under the MIT License.
|
@@ -0,0 +1 @@
|
|
1
|
+
require 'lightbox2/rails'
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,411 @@
|
|
1
|
+
/**
|
2
|
+
* Lightbox v2.7.1
|
3
|
+
* by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
|
4
|
+
*
|
5
|
+
* @license http://creativecommons.org/licenses/by/2.5/
|
6
|
+
* - Free for use in both personal and commercial projects
|
7
|
+
* - Attribution requires leaving author name, author link, and the license info intact
|
8
|
+
*/
|
9
|
+
|
10
|
+
(function() {
|
11
|
+
// Use local alias
|
12
|
+
var $ = jQuery;
|
13
|
+
|
14
|
+
var LightboxOptions = (function() {
|
15
|
+
function LightboxOptions() {
|
16
|
+
this.fadeDuration = 500;
|
17
|
+
this.fitImagesInViewport = true;
|
18
|
+
this.resizeDuration = 700;
|
19
|
+
this.positionFromTop = 50;
|
20
|
+
this.showImageNumberLabel = true;
|
21
|
+
this.alwaysShowNavOnTouchDevices = false;
|
22
|
+
this.wrapAround = false;
|
23
|
+
}
|
24
|
+
|
25
|
+
// Change to localize to non-english language
|
26
|
+
LightboxOptions.prototype.albumLabel = function(curImageNum, albumSize) {
|
27
|
+
return "Image " + curImageNum + " of " + albumSize;
|
28
|
+
};
|
29
|
+
|
30
|
+
return LightboxOptions;
|
31
|
+
})();
|
32
|
+
|
33
|
+
|
34
|
+
var Lightbox = (function() {
|
35
|
+
function Lightbox(options) {
|
36
|
+
this.options = options;
|
37
|
+
this.album = [];
|
38
|
+
this.currentImageIndex = void 0;
|
39
|
+
this.init();
|
40
|
+
}
|
41
|
+
|
42
|
+
Lightbox.prototype.init = function() {
|
43
|
+
this.enable();
|
44
|
+
this.build();
|
45
|
+
};
|
46
|
+
|
47
|
+
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
|
48
|
+
// that contain 'lightbox'. When these are clicked, start lightbox.
|
49
|
+
Lightbox.prototype.enable = function() {
|
50
|
+
var self = this;
|
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
|
+
};
|
56
|
+
|
57
|
+
// Build html for the lightbox and the overlay.
|
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
|
+
});
|
80
|
+
|
81
|
+
this.$lightbox.hide().on('click', function(event) {
|
82
|
+
if ($(event.target).attr('id') === 'lightbox') {
|
83
|
+
self.end();
|
84
|
+
}
|
85
|
+
return false;
|
86
|
+
});
|
87
|
+
|
88
|
+
this.$outerContainer.on('click', function(event) {
|
89
|
+
if ($(event.target).attr('id') === 'lightbox') {
|
90
|
+
self.end();
|
91
|
+
}
|
92
|
+
return false;
|
93
|
+
});
|
94
|
+
|
95
|
+
this.$lightbox.find('.lb-prev').on('click', function() {
|
96
|
+
if (self.currentImageIndex === 0) {
|
97
|
+
self.changeImage(self.album.length - 1);
|
98
|
+
} else {
|
99
|
+
self.changeImage(self.currentImageIndex - 1);
|
100
|
+
}
|
101
|
+
return false;
|
102
|
+
});
|
103
|
+
|
104
|
+
this.$lightbox.find('.lb-next').on('click', function() {
|
105
|
+
if (self.currentImageIndex === self.album.length - 1) {
|
106
|
+
self.changeImage(0);
|
107
|
+
} else {
|
108
|
+
self.changeImage(self.currentImageIndex + 1);
|
109
|
+
}
|
110
|
+
return false;
|
111
|
+
});
|
112
|
+
|
113
|
+
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
|
114
|
+
self.end();
|
115
|
+
return false;
|
116
|
+
});
|
117
|
+
};
|
118
|
+
|
119
|
+
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
|
120
|
+
Lightbox.prototype.start = function($link) {
|
121
|
+
var self = this;
|
122
|
+
var $window = $(window);
|
123
|
+
|
124
|
+
$window.on('resize', $.proxy(this.sizeOverlay, this));
|
125
|
+
|
126
|
+
$('select, object, embed').css({
|
127
|
+
visibility: "hidden"
|
128
|
+
});
|
129
|
+
|
130
|
+
this.sizeOverlay();
|
131
|
+
|
132
|
+
this.album = [];
|
133
|
+
var imageNumber = 0;
|
134
|
+
|
135
|
+
function addToAlbum($link) {
|
136
|
+
self.album.push({
|
137
|
+
link: $link.attr('href'),
|
138
|
+
title: $link.attr('data-title') || $link.attr('title')
|
139
|
+
});
|
140
|
+
}
|
141
|
+
|
142
|
+
// Support both data-lightbox attribute and rel attribute implementations
|
143
|
+
var dataLightboxValue = $link.attr('data-lightbox');
|
144
|
+
var $links;
|
145
|
+
|
146
|
+
if (dataLightboxValue) {
|
147
|
+
$links = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
|
148
|
+
for (var i = 0; i < $links.length; i = ++i) {
|
149
|
+
addToAlbum($($links[i]));
|
150
|
+
if ($links[i] === $link[0]) {
|
151
|
+
imageNumber = i;
|
152
|
+
}
|
153
|
+
}
|
154
|
+
} else {
|
155
|
+
if ($link.attr('rel') === 'lightbox') {
|
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
|
+
}
|
167
|
+
}
|
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
|
+
|
181
|
+
// Hide most UI elements in preparation for the animated resizing of the lightbox.
|
182
|
+
Lightbox.prototype.changeImage = function(imageNumber) {
|
183
|
+
var self = this;
|
184
|
+
|
185
|
+
this.disableKeyboardNav();
|
186
|
+
var $image = this.$lightbox.find('.lb-image');
|
187
|
+
|
188
|
+
this.$overlay.fadeIn(this.options.fadeDuration);
|
189
|
+
|
190
|
+
$('.lb-loader').fadeIn('slow');
|
191
|
+
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
|
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
|
+
}
|
228
|
+
}
|
229
|
+
}
|
230
|
+
self.sizeContainer($image.width(), $image.height());
|
231
|
+
};
|
232
|
+
|
233
|
+
preloader.src = this.album[imageNumber].link;
|
234
|
+
this.currentImageIndex = imageNumber;
|
235
|
+
};
|
236
|
+
|
237
|
+
// Stretch overlay to fit the viewport
|
238
|
+
Lightbox.prototype.sizeOverlay = function() {
|
239
|
+
this.$overlay
|
240
|
+
.width($(window).width())
|
241
|
+
.height($(document).height());
|
242
|
+
};
|
243
|
+
|
244
|
+
// Animate the size of the lightbox to fit the image we are showing
|
245
|
+
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
|
246
|
+
var self = this;
|
247
|
+
|
248
|
+
var oldWidth = this.$outerContainer.outerWidth();
|
249
|
+
var oldHeight = this.$outerContainer.outerHeight();
|
250
|
+
var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
|
251
|
+
var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
|
252
|
+
|
253
|
+
function postResize() {
|
254
|
+
self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
255
|
+
self.$lightbox.find('.lb-prevLink').height(newHeight);
|
256
|
+
self.$lightbox.find('.lb-nextLink').height(newHeight);
|
257
|
+
self.showImage();
|
258
|
+
}
|
259
|
+
|
260
|
+
if (oldWidth !== newWidth || oldHeight !== newHeight) {
|
261
|
+
this.$outerContainer.animate({
|
262
|
+
width: newWidth,
|
263
|
+
height: newHeight
|
264
|
+
}, this.options.resizeDuration, 'swing', function() {
|
265
|
+
postResize();
|
266
|
+
});
|
267
|
+
} else {
|
268
|
+
postResize();
|
269
|
+
}
|
270
|
+
};
|
271
|
+
|
272
|
+
// Display the image and it's details and begin preload neighboring images.
|
273
|
+
Lightbox.prototype.showImage = function() {
|
274
|
+
this.$lightbox.find('.lb-loader').hide();
|
275
|
+
this.$lightbox.find('.lb-image').fadeIn('slow');
|
276
|
+
|
277
|
+
this.updateNav();
|
278
|
+
this.updateDetails();
|
279
|
+
this.preloadNeighboringImages();
|
280
|
+
this.enableKeyboardNav();
|
281
|
+
};
|
282
|
+
|
283
|
+
// Display previous and next navigation if appropriate.
|
284
|
+
Lightbox.prototype.updateNav = function() {
|
285
|
+
// Check to see if the browser supports touch events. If so, we take the conservative approach
|
286
|
+
// and assume that mouse hover events are not supported and always show prev/next navigation
|
287
|
+
// arrows in image sets.
|
288
|
+
var alwaysShowNav = false;
|
289
|
+
try {
|
290
|
+
document.createEvent("TouchEvent");
|
291
|
+
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices)? true: false;
|
292
|
+
} catch (e) {}
|
293
|
+
|
294
|
+
this.$lightbox.find('.lb-nav').show();
|
295
|
+
|
296
|
+
if (this.album.length > 1) {
|
297
|
+
if (this.options.wrapAround) {
|
298
|
+
if (alwaysShowNav) {
|
299
|
+
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
|
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
|
+
}
|
308
|
+
}
|
309
|
+
if (this.currentImageIndex < this.album.length - 1) {
|
310
|
+
this.$lightbox.find('.lb-next').show();
|
311
|
+
if (alwaysShowNav) {
|
312
|
+
this.$lightbox.find('.lb-next').css('opacity', '1');
|
313
|
+
}
|
314
|
+
}
|
315
|
+
}
|
316
|
+
}
|
317
|
+
};
|
318
|
+
|
319
|
+
// Display caption, image number, and closing button.
|
320
|
+
Lightbox.prototype.updateDetails = function() {
|
321
|
+
var self = this;
|
322
|
+
|
323
|
+
// Enable anchor clicks in the injected caption html.
|
324
|
+
// Thanks Nate Wright for the fix. @https://github.com/NateWr
|
325
|
+
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
|
326
|
+
this.$lightbox.find('.lb-caption')
|
327
|
+
.html(this.album[this.currentImageIndex].title)
|
328
|
+
.fadeIn('fast')
|
329
|
+
.find('a').on('click', function(event){
|
330
|
+
location.href = $(this).attr('href');
|
331
|
+
});
|
332
|
+
}
|
333
|
+
|
334
|
+
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
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();
|
344
|
+
});
|
345
|
+
};
|
346
|
+
|
347
|
+
// Preload previous and next images in set.
|
348
|
+
Lightbox.prototype.preloadNeighboringImages = function() {
|
349
|
+
if (this.album.length > this.currentImageIndex + 1) {
|
350
|
+
var preloadNext = new Image();
|
351
|
+
preloadNext.src = this.album[this.currentImageIndex + 1].link;
|
352
|
+
}
|
353
|
+
if (this.currentImageIndex > 0) {
|
354
|
+
var preloadPrev = new Image();
|
355
|
+
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
|
356
|
+
}
|
357
|
+
};
|
358
|
+
|
359
|
+
Lightbox.prototype.enableKeyboardNav = function() {
|
360
|
+
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
|
361
|
+
};
|
362
|
+
|
363
|
+
Lightbox.prototype.disableKeyboardNav = function() {
|
364
|
+
$(document).off('.keyboard');
|
365
|
+
};
|
366
|
+
|
367
|
+
Lightbox.prototype.keyboardAction = function(event) {
|
368
|
+
var KEYCODE_ESC = 27;
|
369
|
+
var KEYCODE_LEFTARROW = 37;
|
370
|
+
var KEYCODE_RIGHTARROW = 39;
|
371
|
+
|
372
|
+
var keycode = event.keyCode;
|
373
|
+
var key = String.fromCharCode(keycode).toLowerCase();
|
374
|
+
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
|
375
|
+
this.end();
|
376
|
+
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
|
377
|
+
if (this.currentImageIndex !== 0) {
|
378
|
+
this.changeImage(this.currentImageIndex - 1);
|
379
|
+
} else if (this.options.wrapAround && this.album.length > 1) {
|
380
|
+
this.changeImage(this.album.length - 1);
|
381
|
+
}
|
382
|
+
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
|
383
|
+
if (this.currentImageIndex !== this.album.length - 1) {
|
384
|
+
this.changeImage(this.currentImageIndex + 1);
|
385
|
+
} else if (this.options.wrapAround && this.album.length > 1) {
|
386
|
+
this.changeImage(0);
|
387
|
+
}
|
388
|
+
}
|
389
|
+
};
|
390
|
+
|
391
|
+
// Closing time. :-(
|
392
|
+
Lightbox.prototype.end = function() {
|
393
|
+
this.disableKeyboardNav();
|
394
|
+
$(window).off("resize", this.sizeOverlay);
|
395
|
+
this.$lightbox.fadeOut(this.options.fadeDuration);
|
396
|
+
this.$overlay.fadeOut(this.options.fadeDuration);
|
397
|
+
$('select, object, embed').css({
|
398
|
+
visibility: "visible"
|
399
|
+
});
|
400
|
+
};
|
401
|
+
|
402
|
+
return Lightbox;
|
403
|
+
|
404
|
+
})();
|
405
|
+
|
406
|
+
$(document).on('page:load ready', function() {
|
407
|
+
var options = new LightboxOptions();
|
408
|
+
var lightbox = new Lightbox(options);
|
409
|
+
});
|
410
|
+
|
411
|
+
}).call(this);
|
@@ -0,0 +1,210 @@
|
|
1
|
+
/* Preload images */
|
2
|
+
body:after {
|
3
|
+
content: url(<%= image_url 'lightbox/close.png'%>) url(<%= image_url 'lightbox/loading.gif'%>) url(<%= image_url 'lightbox/prev.png'%>) url(<%= image_url 'lightbox/next.png'%>);
|
4
|
+
display: none;
|
5
|
+
}
|
6
|
+
|
7
|
+
.lightboxOverlay {
|
8
|
+
position: absolute;
|
9
|
+
top: 0;
|
10
|
+
left: 0;
|
11
|
+
z-index: 9999;
|
12
|
+
background-color: black;
|
13
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
14
|
+
opacity: 0.8;
|
15
|
+
display: none;
|
16
|
+
}
|
17
|
+
|
18
|
+
.lightbox {
|
19
|
+
position: absolute;
|
20
|
+
left: 0;
|
21
|
+
width: 100%;
|
22
|
+
z-index: 10000;
|
23
|
+
text-align: center;
|
24
|
+
line-height: 0;
|
25
|
+
font-weight: normal;
|
26
|
+
}
|
27
|
+
|
28
|
+
.lightbox .lb-image {
|
29
|
+
display: block;
|
30
|
+
height: auto;
|
31
|
+
max-width: inherit;
|
32
|
+
-webkit-border-radius: 3px;
|
33
|
+
-moz-border-radius: 3px;
|
34
|
+
-ms-border-radius: 3px;
|
35
|
+
-o-border-radius: 3px;
|
36
|
+
border-radius: 3px;
|
37
|
+
}
|
38
|
+
|
39
|
+
.lightbox a img {
|
40
|
+
border: none;
|
41
|
+
}
|
42
|
+
|
43
|
+
.lb-outerContainer {
|
44
|
+
position: relative;
|
45
|
+
background-color: white;
|
46
|
+
*zoom: 1;
|
47
|
+
width: 250px;
|
48
|
+
height: 250px;
|
49
|
+
margin: 0 auto;
|
50
|
+
-webkit-border-radius: 4px;
|
51
|
+
-moz-border-radius: 4px;
|
52
|
+
-ms-border-radius: 4px;
|
53
|
+
-o-border-radius: 4px;
|
54
|
+
border-radius: 4px;
|
55
|
+
}
|
56
|
+
|
57
|
+
.lb-outerContainer:after {
|
58
|
+
content: "";
|
59
|
+
display: table;
|
60
|
+
clear: both;
|
61
|
+
}
|
62
|
+
|
63
|
+
.lb-container {
|
64
|
+
padding: 4px;
|
65
|
+
}
|
66
|
+
|
67
|
+
.lb-loader {
|
68
|
+
position: absolute;
|
69
|
+
top: 43%;
|
70
|
+
left: 0;
|
71
|
+
height: 25%;
|
72
|
+
width: 100%;
|
73
|
+
text-align: center;
|
74
|
+
line-height: 0;
|
75
|
+
}
|
76
|
+
|
77
|
+
.lb-cancel {
|
78
|
+
display: block;
|
79
|
+
width: 32px;
|
80
|
+
height: 32px;
|
81
|
+
margin: 0 auto;
|
82
|
+
background: url(<%= image_url 'lightbox/loading.gif'%>) no-repeat;
|
83
|
+
}
|
84
|
+
|
85
|
+
.lb-nav {
|
86
|
+
position: absolute;
|
87
|
+
top: 0;
|
88
|
+
left: 0;
|
89
|
+
height: 100%;
|
90
|
+
width: 100%;
|
91
|
+
z-index: 10;
|
92
|
+
}
|
93
|
+
|
94
|
+
.lb-container > .nav {
|
95
|
+
left: 0;
|
96
|
+
}
|
97
|
+
|
98
|
+
.lb-nav a {
|
99
|
+
outline: none;
|
100
|
+
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
101
|
+
}
|
102
|
+
|
103
|
+
.lb-prev, .lb-next {
|
104
|
+
height: 100%;
|
105
|
+
cursor: pointer;
|
106
|
+
display: block;
|
107
|
+
}
|
108
|
+
|
109
|
+
.lb-nav a.lb-prev {
|
110
|
+
width: 34%;
|
111
|
+
left: 0;
|
112
|
+
float: left;
|
113
|
+
background: url(<%= image_url 'lightbox/prev.png'%>) left 48% no-repeat;
|
114
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
115
|
+
opacity: 0;
|
116
|
+
-webkit-transition: opacity 0.6s;
|
117
|
+
-moz-transition: opacity 0.6s;
|
118
|
+
-o-transition: opacity 0.6s;
|
119
|
+
transition: opacity 0.6s;
|
120
|
+
}
|
121
|
+
|
122
|
+
.lb-nav a.lb-prev:hover {
|
123
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
124
|
+
opacity: 1;
|
125
|
+
}
|
126
|
+
|
127
|
+
.lb-nav a.lb-next {
|
128
|
+
width: 64%;
|
129
|
+
right: 0;
|
130
|
+
float: right;
|
131
|
+
background: url(<%= image_url 'lightbox/next.png'%>) right 48% no-repeat;
|
132
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
133
|
+
opacity: 0;
|
134
|
+
-webkit-transition: opacity 0.6s;
|
135
|
+
-moz-transition: opacity 0.6s;
|
136
|
+
-o-transition: opacity 0.6s;
|
137
|
+
transition: opacity 0.6s;
|
138
|
+
}
|
139
|
+
|
140
|
+
.lb-nav a.lb-next:hover {
|
141
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
142
|
+
opacity: 1;
|
143
|
+
}
|
144
|
+
|
145
|
+
.lb-dataContainer {
|
146
|
+
margin: 0 auto;
|
147
|
+
padding-top: 5px;
|
148
|
+
*zoom: 1;
|
149
|
+
width: 100%;
|
150
|
+
-moz-border-radius-bottomleft: 4px;
|
151
|
+
-webkit-border-bottom-left-radius: 4px;
|
152
|
+
border-bottom-left-radius: 4px;
|
153
|
+
-moz-border-radius-bottomright: 4px;
|
154
|
+
-webkit-border-bottom-right-radius: 4px;
|
155
|
+
border-bottom-right-radius: 4px;
|
156
|
+
}
|
157
|
+
|
158
|
+
.lb-dataContainer:after {
|
159
|
+
content: "";
|
160
|
+
display: table;
|
161
|
+
clear: both;
|
162
|
+
}
|
163
|
+
|
164
|
+
.lb-data {
|
165
|
+
padding: 0 4px;
|
166
|
+
color: #ccc;
|
167
|
+
}
|
168
|
+
|
169
|
+
.lb-data .lb-details {
|
170
|
+
width: 85%;
|
171
|
+
float: left;
|
172
|
+
text-align: left;
|
173
|
+
line-height: 1.1em;
|
174
|
+
}
|
175
|
+
|
176
|
+
.lb-data .lb-caption {
|
177
|
+
font-size: 13px;
|
178
|
+
font-weight: bold;
|
179
|
+
line-height: 1em;
|
180
|
+
}
|
181
|
+
|
182
|
+
.lb-data .lb-number {
|
183
|
+
display: block;
|
184
|
+
clear: left;
|
185
|
+
padding-bottom: 1em;
|
186
|
+
font-size: 12px;
|
187
|
+
color: #999999;
|
188
|
+
}
|
189
|
+
|
190
|
+
.lb-data .lb-close {
|
191
|
+
display: block;
|
192
|
+
float: right;
|
193
|
+
width: 30px;
|
194
|
+
height: 30px;
|
195
|
+
background: url(<%= image_url 'lightbox/close.png'%>) top right no-repeat;
|
196
|
+
text-align: right;
|
197
|
+
outline: none;
|
198
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
199
|
+
opacity: 0.7;
|
200
|
+
-webkit-transition: opacity 0.2s;
|
201
|
+
-moz-transition: opacity 0.2s;
|
202
|
+
-o-transition: opacity 0.2s;
|
203
|
+
transition: opacity 0.2s;
|
204
|
+
}
|
205
|
+
|
206
|
+
.lb-data .lb-close:hover {
|
207
|
+
cursor: pointer;
|
208
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
209
|
+
opacity: 1;
|
210
|
+
}
|
metadata
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: lightbox2-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 2.7.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Gavin Lam
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-12-27 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: railties
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.1'
|
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'
|
27
|
+
description: Lightbox2 for Rails asset pipeline
|
28
|
+
email:
|
29
|
+
- me@gavin.hk
|
30
|
+
executables: []
|
31
|
+
extensions: []
|
32
|
+
extra_rdoc_files: []
|
33
|
+
files:
|
34
|
+
- LICENSE
|
35
|
+
- README.md
|
36
|
+
- lib/lightbox2-rails.rb
|
37
|
+
- lib/lightbox2/rails.rb
|
38
|
+
- lib/lightbox2/rails/engine.rb
|
39
|
+
- lib/lightbox2/rails/version.rb
|
40
|
+
- vendor/assets/images/lightbox/close.png
|
41
|
+
- vendor/assets/images/lightbox/loading.gif
|
42
|
+
- vendor/assets/images/lightbox/next.png
|
43
|
+
- vendor/assets/images/lightbox/prev.png
|
44
|
+
- vendor/assets/javascripts/lightbox.js
|
45
|
+
- vendor/assets/stylesheets/lightbox.css.erb
|
46
|
+
homepage: https://github.com/gavinkflam/lightbox2-rails
|
47
|
+
licenses:
|
48
|
+
- MIT
|
49
|
+
metadata: {}
|
50
|
+
post_install_message:
|
51
|
+
rdoc_options: []
|
52
|
+
require_paths:
|
53
|
+
- lib
|
54
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
55
|
+
requirements:
|
56
|
+
- - ">="
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
version: '0'
|
59
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
60
|
+
requirements:
|
61
|
+
- - ">="
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
version: '0'
|
64
|
+
requirements: []
|
65
|
+
rubyforge_project:
|
66
|
+
rubygems_version: 2.4.5
|
67
|
+
signing_key:
|
68
|
+
specification_version: 4
|
69
|
+
summary: Lightbox2 for Rails asset pipeline
|
70
|
+
test_files: []
|