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

Fix lightbox videos

Browse Source
This commit is contained in:
Franzz
2019-10-21 20:17:11 +02:00
parent acf81386ce
commit 5dcb04a1d7
7 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
script/lightbox.js
View File

@@ -63,7 +63,7 @@
*/
sanitizeTitle: false
//ADDED-START
, hasVideo: false
, hasVideo: true
//ADDED-END
};
@@ -126,7 +126,7 @@
//ADDED-START
if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" src="" controls autoplay></video>');
this.$video = $('<video class="lb-video" src="" controls="true" autoplay playsinline></video>');
this.$image.after(this.$video);
this.videoBorderWidth = {
top: parseInt(this.$video.css('border-top-width'), 10),
@@ -310,7 +310,7 @@
$('.lb-loader').fadeIn('slow');
//ADDED-START
//this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$lightbox.find('.lb-image, .lb-video, .lb-nav, .lb-prev, .lb-next, .lb-number, .lb-caption').hide();
//ADDED-END
this.$outerContainer.addClass('animating');
@@ -326,32 +326,36 @@
var $This = $(this);
//TODO merge with image
windowWidth = $(window).width();
windowHeight = $(window).height();
maxVideoWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom;
if(self.options.fitImagesInViewport) {
windowWidth = $(window).width();
windowHeight = $(window).height();
maxVideoWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom;
//Check if image size is larger than maxWidth|maxHeight in settings
if(self.options.maxWidth && self.options.maxWidth < maxVideoWidth) maxVideoWidth = self.options.maxWidth;
if(self.options.maxHeight && self.options.maxHeight < maxVideoWidth) maxVideoHeight = self.options.maxHeight;
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
//option than we need to size down while maintaining the aspect ratio.
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
videoWidth = maxVideoWidth;
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
$This.width(videoWidth);
$This.height(videoHeight);
} else {
videoHeight = maxVideoHeight;
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
$This.width(videoWidth);
$This.height(videoHeight);
}
}
}
else {
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
}
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
//option than we need to size down while maintaining the aspect ratio.
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
if ((this.videoWidth / maxVideoWidth) > (this.videoHeight / maxVideoHeight)) {
videoWidth = maxVideoWidth;
videoHeight = Math.round(this.videoHeight / (this.videoWidth / videoWidth));
$This.width(videoWidth);
$This.height(videoHeight);
} else {
videoHeight = maxVideoHeight;
videoWidth = Math.round(this.videoWidth / (this.videoHeight / videoHeight));
$This.width(videoWidth);
$This.height(videoHeight);
}
}
self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata');
@@ -468,8 +472,9 @@
};
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function() {
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
@@ -477,14 +482,21 @@
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(typeof oResizeTimer != 'undefined') clearTimeout(oResizeTimer);
oResizeTimer = setTimeout(function(){self.changeImage(self.currentImageIndex);}, 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