Skip to content

Commit 3c792b4

Browse files
lokeshlokesh
committed
New version: v2.9.0
1 parent 6187f20 commit 3c792b4

9 files changed

+170
-53
lines changed

‎dist/css/lightbox.css

+12-5
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ body.lb-disable-scrolling {
3333
display: block;
3434
height: auto;
3535
max-width: inherit;
36+
max-height: none;
3637
border-radius: 3px;
38+
39+
/* Image border */
40+
border: 4px solid white;
3741
}
3842

3943
.lightbox a img {
@@ -42,12 +46,15 @@ body.lb-disable-scrolling {
4246

4347
.lb-outerContainer {
4448
position: relative;
45-
background-color: white;
4649
*zoom: 1;
4750
width: 250px;
4851
height: 250px;
4952
margin: 0 auto;
5053
border-radius: 4px;
54+
55+
/* Background color behind image.
56+
This is visible during transitions. */
57+
background-color: white;
5158
}
5259

5360
.lb-outerContainer:after {
@@ -56,10 +63,6 @@ body.lb-disable-scrolling {
5663
clear: both;
5764
}
5865

59-
.lb-container {
60-
padding: 4px;
61-
}
62-
6366
.lb-loader {
6467
position: absolute;
6568
top: 43%;
@@ -175,6 +178,10 @@ body.lb-disable-scrolling {
175178
line-height: 1em;
176179
}
177180

181+
.lb-data .lb-caption a {
182+
color: #4ae;
183+
}
184+
178185
.lb-data .lb-number {
179186
display: block;
180187
clear: left;

‎dist/css/lightbox.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/lightbox-plus-jquery.js

+72-17
Original file line numberDiff line numberDiff line change
@@ -9210,7 +9210,7 @@ return jQuery;
92109210
}));
92119211

92129212
/*!
9213-
* Lightbox v2.8.2
9213+
* Lightbox v2.9.0
92149214
* by Lokesh Dhakar
92159215
*
92169216
* More info:
@@ -9252,15 +9252,25 @@ return jQuery;
92529252
Lightbox.defaults = {
92539253
albumLabel: 'Image %1 of %2',
92549254
alwaysShowNavOnTouchDevices: false,
9255-
fadeDuration: 500,
9255+
fadeDuration: 600,
92569256
fitImagesInViewport: true,
9257+
imageFadeDuration: 600,
92579258
// maxWidth: 800,
92589259
// maxHeight: 600,
92599260
positionFromTop: 50,
92609261
resizeDuration: 700,
92619262
showImageNumberLabel: true,
92629263
wrapAround: false,
9263-
disableScrolling: false
9264+
disableScrolling: false,
9265+
/*
9266+
Sanitize Title
9267+
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
9268+
This will free you to add html tags, such as links, in the caption.
9269+
9270+
If the caption data is user submitted or from some other untrusted source, then set this to true
9271+
to prevent xss and other injection attacks.
9272+
*/
9273+
sanitizeTitle: false
92649274
};
92659275

92669276
Lightbox.prototype.option = function(options) {
@@ -9272,8 +9282,12 @@ return jQuery;
92729282
};
92739283

92749284
Lightbox.prototype.init = function() {
9275-
this.enable();
9276-
this.build();
9285+
var self = this;
9286+
// Both enable and build methods require the body tag to be in the DOM.
9287+
$(document).ready(function() {
9288+
self.enable();
9289+
self.build();
9290+
});
92779291
};
92789292

92799293
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
@@ -9297,12 +9311,23 @@ return jQuery;
92979311
this.$overlay = $('#lightboxOverlay');
92989312
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
92999313
this.$container = this.$lightbox.find('.lb-container');
9314+
this.$image = this.$lightbox.find('.lb-image');
9315+
this.$nav = this.$lightbox.find('.lb-nav');
93009316

93019317
// Store css values for future lookup
9302-
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
9303-
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
9304-
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
9305-
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
9318+
this.containerPadding = {
9319+
top: parseInt(this.$container.css('padding-top'), 10),
9320+
right: parseInt(this.$container.css('padding-right'), 10),
9321+
bottom: parseInt(this.$container.css('padding-bottom'), 10),
9322+
left: parseInt(this.$container.css('padding-left'), 10)
9323+
};
9324+
9325+
this.imageBorderWidth = {
9326+
top: parseInt(this.$image.css('border-top-width'), 10),
9327+
right: parseInt(this.$image.css('border-right-width'), 10),
9328+
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
9329+
left: parseInt(this.$image.css('border-left-width'), 10)
9330+
};
93069331

93079332
// Attach event handlers to the newly minted DOM elements
93089333
this.$overlay.hide().on('click', function() {
@@ -9342,6 +9367,32 @@ return jQuery;
93429367
return false;
93439368
});
93449369

9370+
/*
9371+
Show context menu for image on right-click
9372+
9373+
There is a div containing the navigation that spans the entire image and lives above of it. If
9374+
you right-click, you are right clicking this div and not the image. This prevents users from
9375+
saving the image or using other context menu actions with the image.
9376+
9377+
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
9378+
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
9379+
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
9380+
we set the pointer events back to auto for the nav div so it can capture hover and left-click
9381+
events as usual.
9382+
*/
9383+
this.$nav.on('mousedown', function(event) {
9384+
if (event.which === 3) {
9385+
self.$nav.css('pointer-events', 'none');
9386+
9387+
self.$lightbox.one('contextmenu', function() {
9388+
setTimeout(function() {
9389+
this.$nav.css('pointer-events', 'auto');
9390+
}.bind(self), 0);
9391+
});
9392+
}
9393+
});
9394+
9395+
93459396
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
93469397
self.end();
93479398
return false;
@@ -9453,8 +9504,8 @@ return jQuery;
94539504

94549505
windowWidth = $(window).width();
94559506
windowHeight = $(window).height();
9456-
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
9457-
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
9507+
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
9508+
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
94589509

94599510
// Check if image size is larger then maxWidth|maxHeight in settings
94609511
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
@@ -9499,8 +9550,8 @@ return jQuery;
94999550

95009551
var oldWidth = this.$outerContainer.outerWidth();
95019552
var oldHeight = this.$outerContainer.outerHeight();
9502-
var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
9503-
var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
9553+
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
9554+
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
95049555

95059556
function postResize() {
95069557
self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -9524,7 +9575,7 @@ return jQuery;
95249575
// Display the image and its details and begin preload neighboring images.
95259576
Lightbox.prototype.showImage = function() {
95269577
this.$lightbox.find('.lb-loader').stop(true).hide();
9527-
this.$lightbox.find('.lb-image').fadeIn('slow');
9578+
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
95289579

95299580
this.updateNav();
95309581
this.updateDetails();
@@ -9576,9 +9627,13 @@ return jQuery;
95769627
// Thanks Nate Wright for the fix. @https://github.com/NateWr
95779628
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
95789629
this.album[this.currentImageIndex].title !== '') {
9579-
this.$lightbox.find('.lb-caption')
9580-
.html(this.album[this.currentImageIndex].title)
9581-
.fadeIn('fast')
9630+
var $caption = this.$lightbox.find('.lb-caption');
9631+
if (this.options.sanitizeTitle) {
9632+
$caption.text(this.album[this.currentImageIndex].title);
9633+
} else {
9634+
$caption.html(this.album[this.currentImageIndex].title);
9635+
}
9636+
$caption.fadeIn('fast')
95829637
.find('a').on('click', function(event) {
95839638
if ($(this).attr('target') !== undefined) {
95849639
window.open($(this).attr('href'), $(this).attr('target'));

‎dist/js/lightbox-plus-jquery.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/lightbox-plus-jquery.min.map

+1-1
Large diffs are not rendered by default.

‎dist/js/lightbox.js

+72-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Lightbox v2.8.2
2+
* Lightbox v2.9.0
33
* by Lokesh Dhakar
44
*
55
* More info:
@@ -41,15 +41,25 @@
4141
Lightbox.defaults = {
4242
albumLabel: 'Image %1 of %2',
4343
alwaysShowNavOnTouchDevices: false,
44-
fadeDuration: 500,
44+
fadeDuration: 600,
4545
fitImagesInViewport: true,
46+
imageFadeDuration: 600,
4647
// maxWidth: 800,
4748
// maxHeight: 600,
4849
positionFromTop: 50,
4950
resizeDuration: 700,
5051
showImageNumberLabel: true,
5152
wrapAround: false,
52-
disableScrolling: false
53+
disableScrolling: false,
54+
/*
55+
Sanitize Title
56+
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
57+
This will free you to add html tags, such as links, in the caption.
58+
59+
If the caption data is user submitted or from some other untrusted source, then set this to true
60+
to prevent xss and other injection attacks.
61+
*/
62+
sanitizeTitle: false
5363
};
5464

5565
Lightbox.prototype.option = function(options) {
@@ -61,8 +71,12 @@
6171
};
6272

6373
Lightbox.prototype.init = function() {
64-
this.enable();
65-
this.build();
74+
var self = this;
75+
// Both enable and build methods require the body tag to be in the DOM.
76+
$(document).ready(function() {
77+
self.enable();
78+
self.build();
79+
});
6680
};
6781

6882
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
@@ -86,12 +100,23 @@
86100
this.$overlay = $('#lightboxOverlay');
87101
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
88102
this.$container = this.$lightbox.find('.lb-container');
103+
this.$image = this.$lightbox.find('.lb-image');
104+
this.$nav = this.$lightbox.find('.lb-nav');
89105

90106
// 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);
107+
this.containerPadding = {
108+
top: parseInt(this.$container.css('padding-top'), 10),
109+
right: parseInt(this.$container.css('padding-right'), 10),
110+
bottom: parseInt(this.$container.css('padding-bottom'), 10),
111+
left: parseInt(this.$container.css('padding-left'), 10)
112+
};
113+
114+
this.imageBorderWidth = {
115+
top: parseInt(this.$image.css('border-top-width'), 10),
116+
right: parseInt(this.$image.css('border-right-width'), 10),
117+
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
118+
left: parseInt(this.$image.css('border-left-width'), 10)
119+
};
95120

96121
// Attach event handlers to the newly minted DOM elements
97122
this.$overlay.hide().on('click', function() {
@@ -131,6 +156,32 @@
131156
return false;
132157
});
133158

159+
/*
160+
Show context menu for image on right-click
161+
162+
There is a div containing the navigation that spans the entire image and lives above of it. If
163+
you right-click, you are right clicking this div and not the image. This prevents users from
164+
saving the image or using other context menu actions with the image.
165+
166+
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
167+
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
168+
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
169+
we set the pointer events back to auto for the nav div so it can capture hover and left-click
170+
events as usual.
171+
*/
172+
this.$nav.on('mousedown', function(event) {
173+
if (event.which === 3) {
174+
self.$nav.css('pointer-events', 'none');
175+
176+
self.$lightbox.one('contextmenu', function() {
177+
setTimeout(function() {
178+
this.$nav.css('pointer-events', 'auto');
179+
}.bind(self), 0);
180+
});
181+
}
182+
});
183+
184+
134185
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
135186
self.end();
136187
return false;
@@ -242,8 +293,8 @@
242293

243294
windowWidth = $(window).width();
244295
windowHeight = $(window).height();
245-
maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
246-
maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
296+
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
297+
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
247298

248299
// Check if image size is larger then maxWidth|maxHeight in settings
249300
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
@@ -288,8 +339,8 @@
288339

289340
var oldWidth = this.$outerContainer.outerWidth();
290341
var oldHeight = this.$outerContainer.outerHeight();
291-
var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
292-
var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
342+
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
343+
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
293344

294345
function postResize() {
295346
self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -313,7 +364,7 @@
313364
// Display the image and its details and begin preload neighboring images.
314365
Lightbox.prototype.showImage = function() {
315366
this.$lightbox.find('.lb-loader').stop(true).hide();
316-
this.$lightbox.find('.lb-image').fadeIn('slow');
367+
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
317368

318369
this.updateNav();
319370
this.updateDetails();
@@ -365,9 +416,13 @@
365416
// Thanks Nate Wright for the fix. @https://github.com/NateWr
366417
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
367418
this.album[this.currentImageIndex].title !== '') {
368-
this.$lightbox.find('.lb-caption')
369-
.html(this.album[this.currentImageIndex].title)
370-
.fadeIn('fast')
419+
var $caption = this.$lightbox.find('.lb-caption');
420+
if (this.options.sanitizeTitle) {
421+
$caption.text(this.album[this.currentImageIndex].title);
422+
} else {
423+
$caption.html(this.album[this.currentImageIndex].title);
424+
}
425+
$caption.fadeIn('fast')
371426
.find('a').on('click', function(event) {
372427
if ($(this).attr('target') !== undefined) {
373428
window.open($(this).attr('href'), $(this).attr('target'));

0 commit comments

Comments
 (0)