localhorst/media-slideshow
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix zoom and grab

Browse Source
This commit is contained in:
Hendrik Schutter
2025-12-22 19:23:50 +01:00
parent c662d3ce2d
commit 1d418dcc6c
1 changed files with 2 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -43,7 +43,7 @@
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
transition: transform 0.1s ease-out; transition: transform 0.1s ease-out;
cursor: zoom-in; cursor: default;
} }
#media-container img.zoomed { #media-container img.zoomed {
@ -381,7 +381,7 @@
<li>🖼️ Fullscreen display of images and videos</li> <li>🖼️ Fullscreen display of images and videos</li>
<li>📅 Automatic EXIF date extraction from photos</li> <li>📅 Automatic EXIF date extraction from photos</li>
<li>📍 GPS location links to Google Maps (when data present)</li> <li>📍 GPS location links to Google Maps (when data present)</li>
<li>🔍 Mouse wheel to zoom images (1x - 5x)</li> <li>🔍 Mouse wheel to zoom images (1x - 5x), drag to pan when zoomed</li>
<li>⌨️ Arrow keys or <code>&lt;</code> <code>&gt;</code> keys to navigate</li> <li>⌨️ Arrow keys or <code>&lt;</code> <code>&gt;</code> keys to navigate</li>
<li>📂 Virtual overview screens for easy folder navigation</li> <li>📂 Virtual overview screens for easy folder navigation</li>
</ul> </ul>
@ -656,24 +656,6 @@
this.container.addEventListener('touchend', () => { this.container.addEventListener('touchend', () => {
this.isPanning = false; this.isPanning = false;
}); });
// Click to zoom toggle
this.container.addEventListener('click', (e) => {
if (e.target.tagName === 'IMG' && !e.target.closest('#virtual-screen') && !this.isPanning) {
if (this.zoom > 1) {
this.zoom = 1;
this.panOffset = { x: 0, y: 0 };
e.target.classList.remove('zoomed');
e.target.style.transform = 'scale(1) translate(0, 0)';
e.target.style.cursor = 'zoom-in';
} else {
this.zoom = 2;
e.target.classList.add('zoomed');
e.target.style.transform = `scale(${this.zoom})`;
e.target.style.cursor = 'grab';
}
}
});
} }
previous() { previous() {