Skip to content
This repository was archived by the owner on Apr 15, 2021. It is now read-only.

Commit 7e884a4

Browse files
gilbitrongilbitron
committed
v1.1
 * [New] Added the clickOverlayToClose setting * [New] Uppercase image extensions are now supported * [Fixed] Can't click anywhere after opening video bug * [Fixed] Doesn't work in iOS bug * [Fixed] Youtube hyphen in URL bug * [Fixed] Inline content overflow bug
1 parent 77dbbae commit 7e884a4

File tree

3 files changed

+77
-56
lines changed

3 files changed

+77
-56
lines changed

‎changelog.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
*** Nivo Lightbox Changelog ***
22

3+
2013.12.11 - version 1.1
4+
* [New] Added the clickOverlayToClose setting
5+
* [New] Uppercase image extensions are now supported
6+
* [Fixed] Can't click anywhere after opening video bug
7+
* [Fixed] Doesn't work in iOS bug
8+
* [Fixed] Youtube hyphen in URL bug
9+
* [Fixed] Inline content overflow bug
10+
311
2013.08.01 - version 1.0
412
* Initial release

‎nivo-lightbox.css

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/*
2-
* Nivo Lightbox v1.0
2+
* Nivo Lightbox v1.1
33
* http://dev7studios.com/nivo-lightbox
44
*
55
* Copyright 2013, Dev7studios
66
* Free to use and abuse under the MIT license.
77
* http://www.opensource.org/licenses/mit-license.php
88
*/
9-
9+
1010
.nivo-lightbox-overlay {
1111
position: fixed;
1212
top: 0;
@@ -21,7 +21,7 @@
2121
-moz-box-sizing: border-box;
2222
box-sizing: border-box;
2323
}
24-
.nivo-lightbox-overlay.nivo-lightbox-open {
24+
.nivo-lightbox-overlay.nivo-lightbox-open {
2525
visibility: visible;
2626
opacity: 1;
2727
}
@@ -73,9 +73,10 @@
7373
width: 100%;
7474
height: 100%;
7575
}
76-
.nivo-lightbox-ajax {
76+
.nivo-lightbox-inline,
77+
.nivo-lightbox-ajax {
7778
max-height: 100%;
78-
overflow: auto;
79+
overflow: auto;
7980
-webkit-box-sizing: border-box;
8081
-moz-box-sizing: border-box;
8182
box-sizing: border-box;
@@ -94,15 +95,15 @@
9495
vertical-align: middle;
9596
}
9697

97-
/* Effects
98+
/* Effects
9899
**********************************************/
99-
.nivo-lightbox-effect-fade,
100-
.nivo-lightbox-effect-fadeScale,
101-
.nivo-lightbox-effect-slideLeft,
102-
.nivo-lightbox-effect-slideRight,
103-
.nivo-lightbox-effect-slideUp,
104-
.nivo-lightbox-effect-slideDown,
105-
.nivo-lightbox-effect-fall {
100+
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
101+
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
102+
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
103+
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
104+
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
105+
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
106+
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
106107
-webkit-transition: all 0.2s ease-in-out;
107108
-moz-transition: all 0.2s ease-in-out;
108109
-ms-transition: all 0.2s ease-in-out;

‎nivo-lightbox.js

Lines changed: 55 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Nivo Lightbox v1.0
2+
* Nivo Lightbox v1.1
33
* http://dev7studios.com/nivo-lightbox
44
*
55
* Copyright 2013, Dev7studios
@@ -14,6 +14,7 @@
1414
effect: 'fade',
1515
theme: 'default',
1616
keyboardNav: true,
17+
clickOverlayToClose: true,
1718
onInit: function(){},
1819
beforeShowLightbox: function(){},
1920
afterShowLightbox: function(lightbox){},
@@ -37,15 +38,20 @@
3738
}
3839

3940
NivoLightbox.prototype = {
40-
41+
4142
init: function(){
4243
var $this = this;
43-
44+
45+
// Need this so we don't use CSS transitions in mobile
46+
if(!$('html').hasClass('nivo-lightbox-notouch')) $('html').addClass('nivo-lightbox-notouch');
47+
if('ontouchstart' in document) $('html').removeClass('nivo-lightbox-notouch');
48+
49+
// Setup the click
4450
this.$el.on('click', function(e){
4551
e.preventDefault();
4652
$this.showLightbox();
4753
});
48-
54+
4955
// keyboardNav
5056
if(this.options.keyboardNav){
5157
$('body').off('keyup').on('keyup', function(e){
@@ -66,7 +72,7 @@
6672
showLightbox: function(){
6773
var $this = this;
6874
this.options.beforeShowLightbox.call(this);
69-
75+
7076
var lightbox = this.constructLightbox();
7177
if(!lightbox) return;
7278
var content = lightbox.find('.nivo-lightbox-content');
@@ -76,12 +82,12 @@
7682

7783
// Add content
7884
this.processContent(content, currentLink);
79-
85+
8086
// Nav
8187
if(this.$el.attr('data-lightbox-gallery')){
8288
var $this = this,
8389
galleryItems = $('[data-lightbox-gallery="'+ this.$el.attr('data-lightbox-gallery') +'"]');
84-
90+
8591
$('.nivo-lightbox-nav').show();
8692

8793
// Prev
@@ -93,7 +99,7 @@
9399
$this.processContent(content, currentLink);
94100
$this.options.onPrev.call(this, [ currentLink ]);
95101
});
96-
102+
97103
// Next
98104
$('.nivo-lightbox-next').off('click').on('click', function(e){
99105
e.preventDefault();
@@ -104,31 +110,31 @@
104110
$this.options.onNext.call(this, [ currentLink ]);
105111
});
106112
}
107-
113+
108114
setTimeout(function(){
109115
lightbox.addClass('nivo-lightbox-open');
110116
$this.options.afterShowLightbox.call(this, [ lightbox ]);
111117
}, 1); // For CSS transitions
112118
},
113-
119+
114120
processContent: function(content, link){
115121
var $this = this;
116122
var href = link.attr('href');
117123
content.html('').addClass('nivo-lightbox-loading');
118-
124+
119125
// Is HiDPI?
120126
if(this.isHidpi() && link.attr('data-lightbox-hidpi')){
121127
href = link.attr('data-lightbox-hidpi');
122128
}
123-
129+
124130
// Image
125-
if(href.match(/\.(jpeg|jpg|gif|png)$/) != null){
131+
if(href.match(/\.(jpeg|jpg|gif|png)$/i) != null){
126132
var img = $('<img>', { src: href });
127133
img.one('load', function() {
128134
var wrap = $('<div class="nivo-lightbox-image" />');
129135
wrap.append(img);
130136
content.html(wrap).removeClass('nivo-lightbox-loading');
131-
137+
132138
// Vertically center images
133139
wrap.css({
134140
'line-height': $('.nivo-lightbox-content').height() +'px',
@@ -143,17 +149,17 @@
143149
}).each(function() {
144150
if(this.complete) $(this).load();
145151
});
146-
152+
147153
img.error(function() {
148154
var wrap = $('<div class="nivo-lightbox-error"><p>'+ $this.options.errorMessage +'</p></div>');
149155
content.html(wrap).removeClass('nivo-lightbox-loading');
150156
});
151157
}
152158
// Video (Youtube/Vimeo)
153-
else if(video = href.match(/(youtube|youtu|vimeo)\.(com|be)\/(watch\?v=(\w+)|(\w+))/)){
159+
else if(video = href.match(/(youtube|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)){
154160
var src = '',
155161
classTerm = 'nivo-lightbox-video';
156-
162+
157163
if(video[1] == 'youtube'){
158164
src = 'http://www.youtube.com/v/'+ video[4];
159165
classTerm = 'nivo-lightbox-youtube';
@@ -166,10 +172,10 @@
166172
src = 'http://player.vimeo.com/video/'+ video[3];
167173
classTerm = 'nivo-lightbox-vimeo';
168174
}
169-
175+
170176
if(src){
171-
var iframe = $('<iframe>', {
172-
src: src,
177+
var iframe = $('<iframe>', {
178+
src: src,
173179
'class': classTerm,
174180
frameborder: 0,
175181
vspace: 0,
@@ -190,7 +196,7 @@
190196
var wrap = $('<div class="nivo-lightbox-ajax" />');
191197
wrap.append(data);
192198
content.html(wrap).removeClass('nivo-lightbox-loading');
193-
199+
194200
// Vertically center html
195201
if(wrap.outerHeight() < content.height()){
196202
wrap.css({
@@ -221,7 +227,7 @@
221227
var wrap = $('<div class="nivo-lightbox-inline" />');
222228
wrap.append($(href).clone().show());
223229
content.html(wrap).removeClass('nivo-lightbox-loading');
224-
230+
225231
// Vertically center html
226232
if(wrap.outerHeight() < content.height()){
227233
wrap.css({
@@ -246,8 +252,8 @@
246252
}
247253
// iFrame (default)
248254
else {
249-
var iframe = $('<iframe>', {
250-
src: href,
255+
var iframe = $('<iframe>', {
256+
src: href,
251257
'class': 'nivo-lightbox-item',
252258
frameborder: 0,
253259
vspace: 0,
@@ -257,7 +263,7 @@
257263
content.html(iframe);
258264
iframe.load(function(){ content.removeClass('nivo-lightbox-loading'); });
259265
}
260-
266+
261267
// Set the title
262268
if(link.attr('title')){
263269
var titleWrap = $('<span>', { 'class': 'nivo-lightbox-title' });
@@ -267,63 +273,69 @@
267273
$('.nivo-lightbox-title-wrap').html('');
268274
}
269275
},
270-
276+
271277
constructLightbox: function(){
272278
if($('.nivo-lightbox-overlay').length) return $('.nivo-lightbox-overlay');
273-
279+
274280
var overlay = $('<div>', { 'class': 'nivo-lightbox-overlay nivo-lightbox-theme-'+ this.options.theme +' nivo-lightbox-effect-'+ this.options.effect });
275281
var wrap = $('<div>', { 'class': 'nivo-lightbox-wrap' });
276282
var content = $('<div>', { 'class': 'nivo-lightbox-content' });
277283
var nav = $('<a href="#" class="nivo-lightbox-nav nivo-lightbox-prev">Previous</a><a href="#" class="nivo-lightbox-nav nivo-lightbox-next">Next</a>');
278284
var close = $('<a href="#" class="nivo-lightbox-close" title="Close">Close</a>');
279285
var title = $('<div>', { 'class': 'nivo-lightbox-title-wrap' });
280-
286+
281287
var isMSIE = /*@cc_on!@*/0;
282288
if(isMSIE) overlay.addClass('nivo-lightbox-ie');
283-
289+
284290
wrap.append(content);
285291
wrap.append(title);
286292
overlay.append(wrap);
287293
overlay.append(nav);
288294
overlay.append(close);
289295
$('body').append(overlay);
290-
296+
291297
var $this = this;
292-
overlay.on('click', function(e){
293-
if(e.target === this ||
294-
$(e.target).hasClass('nivo-lightbox-content') ||
295-
$(e.target).hasClass('nivo-lightbox-image')) $this.destructLightbox();
296-
});
298+
if($this.options.clickOverlayToClose){
299+
overlay.on('click', function(e){
300+
if(e.target === this ||
301+
$(e.target).hasClass('nivo-lightbox-content') ||
302+
$(e.target).hasClass('nivo-lightbox-image')) $this.destructLightbox();
303+
});
304+
}
305+
297306
close.on('click', function(e){
298307
e.preventDefault();
299308
$this.destructLightbox();
300309
});
301-
310+
302311
return overlay;
303312
},
304-
313+
305314
destructLightbox: function(){
306315
var $this = this;
307316
this.options.beforeHideLightbox.call(this);
308-
317+
309318
$('.nivo-lightbox-overlay').removeClass('nivo-lightbox-open');
310319
$('.nivo-lightbox-nav').hide();
311320
$('body').removeClass('nivo-lightbox-body-effect-'+ $this.options.effect);
312-
321+
313322
// For IE
314323
var isMSIE = /*@cc_on!@*/0;
315324
if(isMSIE){
316325
$('.nivo-lightbox-overlay iframe').attr("src", " ");
317326
$('.nivo-lightbox-overlay iframe').remove();
318327
}
319-
328+
320329
// Remove click handlers
321330
$('.nivo-lightbox-prev').off('click');
322331
$('.nivo-lightbox-next').off('click');
323-
332+
333+
// Empty content (for videos)
334+
$('.nivo-lightbox-content').empty();
335+
324336
this.options.afterHideLightbox.call(this);
325337
},
326-
338+
327339
isHidpi: function(){
328340
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
329341
(min--moz-device-pixel-ratio: 1.5),\
@@ -333,7 +345,7 @@
333345
if(window.matchMedia && window.matchMedia(mediaQuery).matches) return true;
334346
return false;
335347
}
336-
348+
337349
};
338350

339351
$.fn[pluginName] = function(options){

0 commit comments

Comments
 (0)