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

Add zoom to lightbox

Browse Source
This commit is contained in:
Franzz
2019-10-28 19:06:22 +01:00
parent 61084c3db9
commit 2af07cc656
6 changed files with 81 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
script/lightbox.js
View File

@@ -123,7 +123,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" src="" controls="true" autoplay playsinline></video>');
@@ -232,6 +232,32 @@
$window.on('resize', $.proxy(this.sizeOverlay, this));
this.sizeOverlay();
//ADDED-START
this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex];
if(!asImg.video) {
asTransform = this.$image.css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var fOldZoom = parseFloat(asTransform[0] || 1);
var fOldTranslateX = parseFloat(asTransform[4] || 0);
var fOldTranslateY = parseFloat(asTransform[5] || 0);
var fOldZoom = parseFloat(asTransform[0] || 1);
var fNewZoom = Math.min(Math.max(fOldZoom + e.deltaY / 10, 1), Math.max(asImg.width/this.$image.width(), asImg.height/this.$image.height()));
var fTransX = fOldTranslateX + (fNewZoom - fOldZoom) * (this.$image.width()/2 - e.offsetX);
var fTransY = fOldTranslateY + (fNewZoom - fOldZoom) * (this.$image.height()/2 - e.offsetY);
var fTransMaxX = (fNewZoom - 1) * this.$image.width() / 2;
var fTransMaxY = (fNewZoom - 1) * this.$image.height() / 2;
fTransX = Math.max(Math.min(fTransX, fTransMaxX), fTransMaxX * -1);
fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
this.$image.css('--scale', fNewZoom);
this.$image.css('--translate-x', fTransX+'px');
this.$image.css('--translate-y', fTransY+'px');
}
});
//ADDED-END
this.album = [];
var imageNumber = 0;
@@ -311,6 +337,7 @@
//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.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
//ADDED-END
this.$outerContainer.addClass('animating');
@@ -397,6 +424,8 @@
preloader.width = preloader.height;
preloader.height = sWidth;
}
self.album[imageNumber].width = preloader.width;
self.album[imageNumber].height = preloader.height;
//ADDED-END
$image.width(preloader.width);
@@ -690,6 +719,7 @@
//ADDED-END
$(window).off('resize', this.sizeOverlay);
this.$nav.off('mousewheel');
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);