Permalink
Browse files

New version: v2.9.0

1 parent 6187f20 commit 3c792b46c0e5dd6923f9d71db8cad611beef8050 @lokesh committed Oct 30, 2016
View
@@ -33,7 +33,11 @@ body.lb-disable-scrolling {
display: block;
height: auto;
max-width: inherit;
+ max-height: none;
border-radius: 3px;
+
+ /* Image border */
+ border: 4px solid white;
}
.lightbox a img {
@@ -42,12 +46,15 @@ body.lb-disable-scrolling {
.lb-outerContainer {
position: relative;
- background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
+
+ /* Background color behind image.
+ This is visible during transitions. */
+ background-color: white;
}
.lb-outerContainer:after {
@@ -56,10 +63,6 @@ body.lb-disable-scrolling {
clear: both;
}
-.lb-container {
- padding: 4px;
-}
-
.lb-loader {
position: absolute;
top: 43%;
@@ -175,6 +178,10 @@ body.lb-disable-scrolling {
line-height: 1em;
}
+.lb-data .lb-caption a {
+ color: #4ae;
+}
+
.lb-data .lb-number {
display: block;
clear: left;
@@ -1 +1 @@
-.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;border-radius:3px}.lightbox a img{border:none}.lb-outerContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;border-radius:4px}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-container{padding:4px}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
+.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
@@ -9210,7 +9210,7 @@ return jQuery;
}));
/*!
- * Lightbox v2.8.2
+ * Lightbox v2.9.0
* by Lokesh Dhakar
*
* More info:
@@ -9252,15 +9252,25 @@ return jQuery;
Lightbox.defaults = {
albumLabel: 'Image %1 of %2',
alwaysShowNavOnTouchDevices: false,
- fadeDuration: 500,
+ fadeDuration: 600,
fitImagesInViewport: true,
+ imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
wrapAround: false,
- disableScrolling: false
+ disableScrolling: false,
+ /*
+ Sanitize Title
+ If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
+ This will free you to add html tags, such as links, in the caption.
+
+ If the caption data is user submitted or from some other untrusted source, then set this to true
+ to prevent xss and other injection attacks.
+ */
+ sanitizeTitle: false
};
Lightbox.prototype.option = function(options) {
@@ -9272,8 +9282,12 @@ return jQuery;
};
Lightbox.prototype.init = function() {
- this.enable();
- this.build();
+ var self = this;
+ // Both enable and build methods require the body tag to be in the DOM.
+ $(document).ready(function() {
+ self.enable();
+ self.build();
+ });
};
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
@@ -9297,12 +9311,23 @@ return jQuery;
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
+ this.$image = this.$lightbox.find('.lb-image');
+ this.$nav = this.$lightbox.find('.lb-nav');
// Store css values for future lookup
- this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
- this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
- this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
- this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
+ this.containerPadding = {
+ top: parseInt(this.$container.css('padding-top'), 10),
+ right: parseInt(this.$container.css('padding-right'), 10),
+ bottom: parseInt(this.$container.css('padding-bottom'), 10),
+ left: parseInt(this.$container.css('padding-left'), 10)
+ };
+
+ this.imageBorderWidth = {
+ top: parseInt(this.$image.css('border-top-width'), 10),
+ right: parseInt(this.$image.css('border-right-width'), 10),
+ bottom: parseInt(this.$image.css('border-bottom-width'), 10),
+ left: parseInt(this.$image.css('border-left-width'), 10)
+ };
// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
@@ -9342,6 +9367,32 @@ return jQuery;
return false;
});
+ /*
+ Show context menu for image on right-click
+
+ There is a div containing the navigation that spans the entire image and lives above of it. If
+ you right-click, you are right clicking this div and not the image. This prevents users from
+ saving the image or using other context menu actions with the image.
+
+ To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
+ set pointer-events to none on the nav div. This is so that the upcoming right-click event on
+ the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
+ we set the pointer events back to auto for the nav div so it can capture hover and left-click
+ events as usual.
+ */
+ this.$nav.on('mousedown', function(event) {
+ if (event.which === 3) {
+ self.$nav.css('pointer-events', 'none');
+
+ self.$lightbox.one('contextmenu', function() {
+ setTimeout(function() {
+ this.$nav.css('pointer-events', 'auto');
+ }.bind(self), 0);
+ });
+ }
+ });
+
+
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
@@ -9453,8 +9504,8 @@ return jQuery;
windowWidth = $(window).width();
windowHeight = $(window).height();
- maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
- maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
+ maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+ maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
// Check if image size is larger then maxWidth|maxHeight in settings
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
@@ -9499,8 +9550,8 @@ return jQuery;
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
- var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
- var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
+ var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
+ var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -9524,7 +9575,7 @@ return jQuery;
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
- this.$lightbox.find('.lb-image').fadeIn('slow');
+ this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
this.updateNav();
this.updateDetails();
@@ -9576,9 +9627,13 @@ return jQuery;
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
this.album[this.currentImageIndex].title !== '') {
- this.$lightbox.find('.lb-caption')
- .html(this.album[this.currentImageIndex].title)
- .fadeIn('fast')
+ var $caption = this.$lightbox.find('.lb-caption');
+ if (this.options.sanitizeTitle) {
+ $caption.text(this.album[this.currentImageIndex].title);
+ } else {
+ $caption.html(this.album[this.currentImageIndex].title);
+ }
+ $caption.fadeIn('fast')
.find('a').on('click', function(event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
Oops, something went wrong.
Oops, something went wrong.
View
@@ -1,5 +1,5 @@
/*!
- * Lightbox v2.8.2
+ * Lightbox v2.9.0
* by Lokesh Dhakar
*
* More info:
@@ -41,15 +41,25 @@
Lightbox.defaults = {
albumLabel: 'Image %1 of %2',
alwaysShowNavOnTouchDevices: false,
- fadeDuration: 500,
+ fadeDuration: 600,
fitImagesInViewport: true,
+ imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
wrapAround: false,
- disableScrolling: false
+ disableScrolling: false,
+ /*
+ Sanitize Title
+ If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
+ This will free you to add html tags, such as links, in the caption.
+
+ If the caption data is user submitted or from some other untrusted source, then set this to true
+ to prevent xss and other injection attacks.
+ */
+ sanitizeTitle: false
};
Lightbox.prototype.option = function(options) {
@@ -61,8 +71,12 @@
};
Lightbox.prototype.init = function() {
- this.enable();
- this.build();
+ var self = this;
+ // Both enable and build methods require the body tag to be in the DOM.
+ $(document).ready(function() {
+ self.enable();
+ self.build();
+ });
};
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
@@ -86,12 +100,23 @@
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
+ this.$image = this.$lightbox.find('.lb-image');
+ this.$nav = this.$lightbox.find('.lb-nav');
// Store css values for future lookup
- this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
- this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
- this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
- this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
+ this.containerPadding = {
+ top: parseInt(this.$container.css('padding-top'), 10),
+ right: parseInt(this.$container.css('padding-right'), 10),
+ bottom: parseInt(this.$container.css('padding-bottom'), 10),
+ left: parseInt(this.$container.css('padding-left'), 10)
+ };
+
+ this.imageBorderWidth = {
+ top: parseInt(this.$image.css('border-top-width'), 10),
+ right: parseInt(this.$image.css('border-right-width'), 10),
+ bottom: parseInt(this.$image.css('border-bottom-width'), 10),
+ left: parseInt(this.$image.css('border-left-width'), 10)
+ };
// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
@@ -131,6 +156,32 @@
return false;
});
+ /*
+ Show context menu for image on right-click
+
+ There is a div containing the navigation that spans the entire image and lives above of it. If
+ you right-click, you are right clicking this div and not the image. This prevents users from
+ saving the image or using other context menu actions with the image.
+
+ To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
+ set pointer-events to none on the nav div. This is so that the upcoming right-click event on
+ the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
+ we set the pointer events back to auto for the nav div so it can capture hover and left-click
+ events as usual.
+ */
+ this.$nav.on('mousedown', function(event) {
+ if (event.which === 3) {
+ self.$nav.css('pointer-events', 'none');
+
+ self.$lightbox.one('contextmenu', function() {
+ setTimeout(function() {
+ this.$nav.css('pointer-events', 'auto');
+ }.bind(self), 0);
+ });
+ }
+ });
+
+
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
@@ -242,8 +293,8 @@
windowWidth = $(window).width();
windowHeight = $(window).height();
- maxImageWidth = windowWidth - self.containerLeftPadding - self.containerRightPadding - 20;
- maxImageHeight = windowHeight - self.containerTopPadding - self.containerBottomPadding - 120;
+ maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+ maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
// Check if image size is larger then maxWidth|maxHeight in settings
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
@@ -288,8 +339,8 @@
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
- var newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
- var newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
+ var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
+ var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -313,7 +364,7 @@
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
- this.$lightbox.find('.lb-image').fadeIn('slow');
+ this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
this.updateNav();
this.updateDetails();
@@ -365,9 +416,13 @@
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
this.album[this.currentImageIndex].title !== '') {
- this.$lightbox.find('.lb-caption')
- .html(this.album[this.currentImageIndex].title)
- .fadeIn('fast')
+ var $caption = this.$lightbox.find('.lb-caption');
+ if (this.options.sanitizeTitle) {
+ $caption.text(this.album[this.currentImageIndex].title);
+ } else {
+ $caption.html(this.album[this.currentImageIndex].title);
+ }
+ $caption.fadeIn('fast')
.find('a').on('click', function(event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
Oops, something went wrong.

0 comments on commit 3c792b4

Please sign in to comment.