franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bump lightbox to 2.11.4

Browse Source
This commit is contained in:
Franzz
2023-10-19 21:33:59 +02:00
parent b3cd217e28
commit af05650443
2 changed files with 62 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
script/lightbox.js
View File

@@ -1,5 +1,5 @@
/*!
* Lightbox v2.11.3
* Lightbox v2.11.4
* by Lokesh Dhakar
*
* More info:
@@ -46,8 +46,6 @@
fadeDuration: 600,
fitImagesInViewport: true,
imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
@@ -62,10 +60,8 @@
to prevent xss and other injection attacks.
*/
sanitizeTitle: false
//ADDED-START
, hasVideo: true
, hasVideo: true
, onMediaChange: (oMedia) => {}
//ADDED-END
};
Lightbox.prototype.option = function(options) {
@@ -147,7 +143,6 @@
</div>\
').appendTo($('body'));
// Cache jQuery objects
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
@@ -155,8 +150,7 @@
this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav');
//ADDED-START
if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" controls autoplay></video>');
this.$image.after(this.$video);
@@ -166,8 +160,7 @@
bottom: parseInt(this.$video.css('border-bottom-width'), 10),
left: parseInt(this.$video.css('border-left-width'), 10)
};
}
//ADDED-END
}
// Store css values for future lookup
this.containerPadding = {
@@ -185,11 +178,8 @@
};
// Attach event handlers to the newly minted DOM elements
//ADDED-START
//this.$overlay.hide().on('click', function() {
this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() {
//ADDED-END
self.end();
this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() {
self.end();
return false;
});
@@ -250,9 +240,13 @@
});
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
this.$lightbox.find('.lb-loader, .lb-close').on('click keyup', function(e) {
// If mouse click OR 'enter' or 'space' keypress, close LB
if (
e.type === 'click' || (e.type === 'keyup' && (e.which === 13 || e.which === 32))) {
self.end();
return false;
}
});
};
@@ -265,7 +259,6 @@
this.sizeOverlay();
//ADDED-START
//Manage Zoom Event
this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex];
@@ -324,11 +317,25 @@
self.$image.css('--translate-x', fTransX + 'px');
self.$image.css('--translate-y', fTransY + 'px');
}
//ADDED-END
this.album = [];
var imageNumber = 0;
function addToAlbum($link) {
self.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
, orientation: $link.attr('data-orientation')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
, $Media: $link.attr('data-type')=='video'?self.$video:self.$image
, width: $link.find('img').attr('width')
, height: $link.find('img').attr('height')
, set: $link.attr('data-lightbox') || $link.attr('rel')
});
}
// Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox');
var $links;
@@ -336,7 +343,7 @@
if (dataLightboxValue) {
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) {
this.addToAlbum($($links[i]));
addToAlbum($($links[i]));
if ($links[i] === $link[0]) {
imageNumber = i;
}
@@ -344,12 +351,12 @@
} else {
if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set
this.addToAlbum($link);
addToAlbum($link);
} else {
// If image is part of a set
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) {
this.addToAlbum($($links[j]));
addToAlbum($($links[j]));
if ($links[j] === $link[0]) {
imageNumber = j;
}
@@ -358,14 +365,7 @@
}
// Position Lightbox
//ADDED-START
//var top = $window.scrollTop() + this.options.positionFromTop;
//var left = $window.scrollLeft();
this.$lightbox/*.css({
top: top + 'px',
left: left + 'px'
})*/.fadeIn(this.options.fadeDuration);
//ADDED-END
this.$lightbox.fadeIn(this.options.fadeDuration);
// Disable scrolling of the page while open
if (this.options.disableScrolling) {
@@ -374,25 +374,7 @@
this.changeImage(imageNumber);
};
Lightbox.prototype.addToAlbum = function($link) {
this.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
, $Media: $link.attr('data-type')=='video'?this.$video:this.$image
, width: $link.find('img').attr('width')
, height: $link.find('img').attr('height')
, set: $link.attr('data-lightbox') || $link.attr('rel')
//ADDED-END
});
}
//ADDED-START
Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
var iWindowHeight = $(window).height();
@@ -473,20 +455,20 @@
// Hide most UI elements in preparation for the animated resizing of the lightbox.
Lightbox.prototype.changeImage = function(imageNumber) {
var self = this;
var filename = this.album[imageNumber].link;
// Disable keyboard nav during transitions
this.disableKeyboardNav();
var self = this;
var filename = this.album[imageNumber].link;
// Show loading state
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
// Disable keyboard nav during transitions
this.disableKeyboardNav();
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide();
// Show loading state
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption, .lb-close').hide();
this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
this.$outerContainer.addClass('animating');
this.$outerContainer.addClass('animating');
this.$container.removeClass('moveable moving');
this.options.onMediaChange(self.album[imageNumber]);
@@ -534,31 +516,19 @@
break;
}
this.currentImageIndex = imageNumber;
this.currentImageIndex = imageNumber;
};
//ADDED-END
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function(e) {
//var self = this;
/*
/*
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
hidden before we measure the document width, as the presence of the scrollbar will affect the
number.
*/
//ADDED-START
/*
setTimeout(function() {
self.$overlay
.width($(document).width())
.height($(document).height());
}, 0);
*/
if(e) {
if(e) {
if(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
oResizeTimer = setTimeout(
() => {
@@ -573,17 +543,16 @@
},
200
);
}
//ADDED-END
}
};
// Animate the size of the lightbox to fit the image we are showing
// This method also shows the the image.
//ADDED-START
//Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) {
media = media || 'image';
//ADDED-END
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) {
media = media || 'image';
//ADDED-END
var self = this;
var oldWidth = this.$outerContainer.outerWidth();
@@ -597,19 +566,13 @@
//ADDED-END
function postResize() {
//ADDED-START
//self.$lightbox.find('.lb-dataContainer').width(newWidth);
if(self.$lightbox.hasClass('vertical')) self.$lightbox.find('.lb-dataContainer').width(newWidth);
else self.$lightbox.find('.lb-dataContainer').height(newHeight);
//ADDED-END
self.$lightbox.find('.lb-prevLink').height(newHeight);
self.$lightbox.find('.lb-nextLink').height(newHeight);
// Set focus on one of the two root nodes so keyboard events are captured.
//ADDED-START
//self.$overlay.focus();
self.$overlay.trigger( 'focus' );
//ADDED-END
self.$overlay.trigger('focus');
self.showImage();
}
@@ -630,11 +593,8 @@
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
//ADDED-START
//this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].type == 'video') this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
//ADDED-END
this.updateNav();
this.updateDetails();
@@ -691,29 +651,10 @@
$caption.text(this.album[this.currentImageIndex].title);
} else {
$caption.html(this.album[this.currentImageIndex].title);
}
//ADDED-START
//$caption.fadeIn('fast');
}
$caption.add(this.$lightbox.find('.lb-close')).fadeIn('fast');
//ADDED-END
}
//ADDED-START
/*
//ADDED-END
if (this.album.length > 1 && this.options.showImageNumberLabel) {
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
//ADDED-START
//this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
this.$lightbox.find('.lb-number').empty().append(labelText).fadeIn('fast');
//ADDED-END
} else {
this.$lightbox.find('.lb-number').hide();
}
//ADDED-START
*/
//ADDED-END
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
@@ -734,9 +675,7 @@
};
Lightbox.prototype.enableKeyboardNav = function() {
//ADDED-START
this.disableKeyboardNav();
//ADDED-END
this.disableKeyboardNav();
this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
@@ -775,19 +714,17 @@
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
//ADDED-START
if(this.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
this.$video.attr('src', '');
if(this.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
this.$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
oSpot.flushHash();
//ADDED-END
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
oSpot.flushHash();
$(window).off('resize', this.sizeOverlay);
this.$nav.off('mousewheel');
this.$nav.off('mousewheel');
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);