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

Allow upload of videos

Browse Source
This commit is contained in:
Franzz
2019-06-28 22:17:46 +02:00
parent 9f7ada89f4
commit e1aac63ae0
10 changed files with 140 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
script/lightbox.js
View File

@@ -62,6 +62,9 @@
to prevent xss and other injection attacks.
*/
sanitizeTitle: false
//ADDED-START
, hasVideo: false
//ADDED-END
};
Lightbox.prototype.option = function(options) {
@@ -109,6 +112,19 @@
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" width="560" height="315" src="" controls autoplay></video>');
this.$image.after(this.$video);
this.videoBorderWidth = {
top: parseInt(this.$video.css('border-top-width'), 10),
right: parseInt(this.$video.css('border-right-width'), 10),
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 = {
top: parseInt(this.$container.css('padding-top'), 10),
@@ -217,6 +233,7 @@
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, video: (self.options.hasVideo && typeof $link.attr('data-video') !== 'undefined' && $link.attr('data-video') === 'true')
//ADDED-END
});
}
@@ -248,7 +265,7 @@
}
}
}
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
@@ -275,9 +292,35 @@
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
//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();
//ADDED-END
this.$outerContainer.addClass('animating');
//ADDED-START
if(self.options.hasVideo) {
var $video = this.$lightbox.find('.lb-video');
var $lbContainer = this.$lightbox.find('.lb-container');
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'));
this.currentImageIndex = imageNumber;
self.sizeContainer($videoWidth, $videoHeight, 'video');
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
return;
}
else {
$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
}
//ADDED-END
// When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image();
@@ -341,7 +384,10 @@
}
}
}
self.sizeContainer($image.width(), $image.height());
//ADDED-START
//self.sizeContainer($image.width(), $image.height());
self.sizeContainer($image.width(), $image.height(), 'image');
//ADDED-END
};
preloader.src = this.album[imageNumber].link;
@@ -356,14 +402,24 @@
};
// Animate the size of the lightbox to fit the image we are showing
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var self = this;
//ADDED-START
//Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight, media) {
media = media || 'image';
//ADDED-END
var self = this;
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
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;
//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;
//ADDED-END
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
self.$lightbox.find('.lb-prevLink').height(newHeight);
@@ -386,8 +442,13 @@
// 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(this.options.imageFadeDuration);
//ADDED-START
//this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].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();
this.preloadNeighboringImages();
@@ -433,7 +494,7 @@
// Display caption, image number, and closing button.
Lightbox.prototype.updateDetails = function() {
var self = this;
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
@@ -515,6 +576,18 @@
// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
//ADDED-START
if(this.options.hasVideo) {
var $video = this.$lightbox.find('.lb-video');
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
//ADDED-END
$(window).off('resize', this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);