Skip to content

Commit

Permalink
New version: v2.9.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@lokesh
lokesh committed Oct 30, 2016
1 parent 6187f20 commit 3c792b4
Show file tree
Hide file tree
Showing 9 changed files with 170 additions and 53 deletions.
17 changes: 12 additions & 5 deletions dist/css/lightbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -56,10 +63,6 @@ body.lb-disable-scrolling {
clear: both;
}

.lb-container {
padding: 4px;
}

.lb-loader {
position: absolute;
top: 43%;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/lightbox.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

89 changes: 72 additions & 17 deletions dist/js/lightbox-plus-jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9210,7 +9210,7 @@ return jQuery;
}));

/*!
* Lightbox v2.8.2
* Lightbox v2.9.0
* by Lokesh Dhakar
*
* More info:
Expand Down Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -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() {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -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'));
Expand Down
4 changes: 2 additions & 2 deletions dist/js/lightbox-plus-jquery.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/lightbox-plus-jquery.min.map
View file

Large diffs are not rendered by default.

89 changes: 72 additions & 17 deletions dist/js/lightbox.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Lightbox v2.8.2
* Lightbox v2.9.0
* by Lokesh Dhakar
*
* More info:
Expand Down Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -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() {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -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'));
Expand Down
Loading

0 comments on commit 3c792b4

Please sign in to comment.