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

Video support

Browse Source
This commit is contained in:
Franzz
2019-06-30 21:46:41 +02:00
parent e1aac63ae0
commit 73f2e6c6e4
11 changed files with 320 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
script/lightbox.js
View File

@@ -114,7 +114,7 @@
//ADDED-START
if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" width="560" height="315" src="" controls autoplay></video>');
this.$video = $('<video class="lb-video" src="" controls autoplay></video>');
this.$image.after(this.$video);
this.videoBorderWidth = {
top: parseInt(this.$video.css('border-top-width'), 10),
@@ -306,11 +306,43 @@
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
if(self.album[imageNumber].video) {
$video.attr('src', self.album[imageNumber].link);
var $videoWidth = parseInt($video.attr('width'));
var $videoHeight = parseInt($video.attr('height'));
$video.on('loadedmetadata', function(){
var $This = $(this);
//TODO merge with image
if(self.options.fitImagesInViewport) {
windowWidth = $(window).width();
windowHeight = $(window).height();
maxVideoWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.videoBorderWidth.left - self.videoBorderWidth.right - 20;
maxVideoHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.videoBorderWidth.top - self.videoBorderWidth.bottom - 120;
//Check if image size is larger then 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 = parseInt(this.videoHeight / (this.videoWidth / videoWidth), 10);
$This.width(videoWidth);
$This.height(videoHeight);
} else {
videoHeight = maxVideoHeight;
videoWidth = parseInt(this.videoWidth / (this.videoHeight / videoHeight), 10);
$This.width(videoWidth);
$This.height(videoHeight);
}
}
}
self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata');
});
this.currentImageIndex = imageNumber;
self.sizeContainer($videoWidth, $videoHeight, 'video');
$video.attr('src', self.album[imageNumber].link);
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
return;
@@ -414,10 +446,9 @@
//ADDED-START
//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;
var mediaBorderWidth = (media=='image')?(this.imageBorderWidth.left + this.imageBorderWidth.right):(this.videoBorderWidth.left + this.videoBorderWidth.right);
var mediaBorderHeight = (media=='image')?(this.imageBorderWidth.top + this.imageBorderWidth.bottom):(this.videoBorderWidth.top + this.videoBorderWidth.bottom);
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + mediaBorderWidth;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + mediaBorderHeight;
var mediaBorderWidth = (media=='image')?this.imageBorderWidth:this.videoBorderWidth;
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + mediaBorderWidth.left + mediaBorderWidth.right;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + mediaBorderWidth.top + mediaBorderWidth.bottom;
//ADDED-END
function postResize() {