Fix lightbox portrait mode: dynamic media data position
This commit is contained in:
@@ -302,7 +302,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Position Lightbox
|
||||
//ADDED-START
|
||||
//var top = $window.scrollTop() + this.options.positionFromTop;
|
||||
@@ -336,13 +335,42 @@
|
||||
$('.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-number, .lb-caption').hide();
|
||||
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'});
|
||||
//ADDED-END
|
||||
|
||||
this.$outerContainer.addClass('animating');
|
||||
|
||||
//ADDED-START
|
||||
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
|
||||
var iWindowWidth = $(window).width();
|
||||
var iWindowHeight = $(window).height();
|
||||
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth;
|
||||
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right;
|
||||
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop;
|
||||
|
||||
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height();
|
||||
var iImageRatio = iMediaWidth / iMediaHeight;
|
||||
|
||||
//Case horizontal
|
||||
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
|
||||
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
|
||||
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
|
||||
|
||||
//Case vertical
|
||||
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
|
||||
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
|
||||
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
|
||||
|
||||
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
|
||||
|
||||
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
|
||||
else iMaxMediaWidth -= iDataMaxWidth;
|
||||
|
||||
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
|
||||
};
|
||||
|
||||
if(self.options.hasVideo) {
|
||||
var $lbContainer = this.$lightbox.find('.lb-container');
|
||||
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
|
||||
@@ -351,38 +379,40 @@
|
||||
this.$video.on('loadedmetadata', function(){
|
||||
var $This = $(this);
|
||||
|
||||
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video');
|
||||
maxVideoWidth = oMaxSizes.maxWidth;
|
||||
maxVideoHeight = oMaxSizes.maxHeight;
|
||||
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
|
||||
|
||||
//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) {
|
||||
//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;
|
||||
if(self.options.maxHeight && self.options.maxHeight < maxVideoHeight) maxVideoHeight = self.options.maxHeight;
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
videoWidth = this.videoWidth;
|
||||
videoHeight = this.videoHeight;
|
||||
}
|
||||
$This.width(videoWidth);
|
||||
$This.height(videoHeight);
|
||||
|
||||
self.sizeContainer($This.width(), $This.height(), 'video');
|
||||
$This.off('loadedmetadata');
|
||||
});
|
||||
@@ -394,7 +424,7 @@
|
||||
return;
|
||||
}
|
||||
else {
|
||||
this.$video.attr('src', '');
|
||||
this.$video.prop('src', null);
|
||||
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
|
||||
}
|
||||
}
|
||||
@@ -438,8 +468,10 @@
|
||||
//ADDED-START
|
||||
//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 - self.options.positionFromTop - 70;
|
||||
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
|
||||
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop;
|
||||
var oMaxSizes = getMaxSizes(preloader.width, preloader.height, 'image');
|
||||
maxImageWidth = oMaxSizes.maxWidth;
|
||||
maxImageHeight = oMaxSizes.maxHeight;
|
||||
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
|
||||
//ADDED-END
|
||||
|
||||
/*
|
||||
@@ -547,7 +579,8 @@
|
||||
function postResize() {
|
||||
//ADDED-START
|
||||
//self.$lightbox.find('.lb-dataContainer').width(newWidth);
|
||||
self.$lightbox.find('.lb-dataContainer').height(newHeight);
|
||||
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);
|
||||
@@ -636,7 +669,10 @@
|
||||
} else {
|
||||
$caption.html(this.album[this.currentImageIndex].title);
|
||||
}
|
||||
$caption.fadeIn('fast');
|
||||
//ADDED-START
|
||||
//$caption.fadeIn('fast');
|
||||
$caption.add(this.$lightbox.find('.lb-close')).fadeIn('fast');
|
||||
//ADDED-END
|
||||
}
|
||||
|
||||
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
||||
|
||||
Reference in New Issue
Block a user