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

Add image repositioning feature

Browse Source
This commit is contained in:
Franzz
2022-01-23 00:03:51 +01:00
parent 3be01ab479
commit 469db34534
5 changed files with 122 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
script/lightbox.js
View File

@@ -114,7 +114,38 @@
// on the page below.
//
// Github issue: https://github.com/lokesh/lightbox2/issues/663
$('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" href="#"></a></div></div></div><div class="lb-dataContainer desktop"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
$('\
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>\
<div id="lightbox" tabindex="-1" class="lightbox">\
<div class="lb-outerContainer">\
<div class="lb-container">\
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />\
<div class="lb-nav">\
<div class="lb-prev-area">\
<a class="lb-prev" aria-label="Previous image" href="" ></a>\
</div>\
<div class="lb-next-area">\
<a class="lb-next" aria-label="Next image" href="" ></a>\
</div>\
</div>\
<div class="lb-loader">\
<a class="lb-cancel" href="#"></a>\
</div>\
</div>\
</div>\
<div class="lb-dataContainer desktop">\
<div class="lb-data">\
<div class="lb-details">\
<span class="lb-caption"></span>\
<span class="lb-number"></span>\
</div>\
<div class="lb-closeContainer">\
<a class="lb-close"></a>\
</div>\
</div>\
</div>\
').appendTo($('body'));
// Cache jQuery objects
this.$lightbox = $('#lightbox');
@@ -234,6 +265,7 @@
this.sizeOverlay();
//ADDED-START
//Manage Zoom Event
this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex];
if(!asImg.type != 'video') {
@@ -257,6 +289,42 @@
this.$image.css('--translate-y', fTransY+'px');
}
});
//Manage Repositioning Event
this.$nav.on('mousedown', (e)=>{
if(this.$image.css('--scale') > 1) {
//The following block gets the X/Y offset (the difference between where it starts and where it was clicked)
this.gMouseDownOffsetX = e.clientX - parseFloat(this.$image.css('--translate-x') || 0);
this.gMouseDownOffsetY = e.clientY - parseFloat(this.$image.css('--translate-y') || 0);
//Change cursor
this.$container.addClass('moving');
$window.on('mousemove', divMove);
}
});
$window.on('mouseup', ()=>{
$window.off('mousemove', divMove);
this.$container.removeClass('moving');
});
function divMove(e){
//var oImage = self.album[self.currentImageIndex];
let iZoom = self.$image.css('--scale');
let fTransX = e.clientX - self.gMouseDownOffsetX;
let fTransY = e.clientY - self.gMouseDownOffsetY;
var fTransMaxX = (iZoom - 1) * self.$image.width() / 2;
var fTransMaxY = (iZoom - 1) * self.$image.height() / 2;
fTransX = Math.max(Math.min(fTransX, fTransMaxX), fTransMaxX * -1);
fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
self.$image.css('--translate-x', fTransX + 'px');
self.$image.css('--translate-y', fTransY + 'px');
}
//ADDED-END
this.album = [];