luxick/luxtools-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajust lightbox

Browse Source
This commit is contained in:
luxick
2026-01-09 15:11:47 +01:00
parent 2d9e5ff8d0
commit c1ae169335
2 changed files with 66 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
script.js
View File

@@ -56,11 +56,11 @@
root.innerHTML = root.innerHTML =
'<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' + '<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' +
'<div class="luxtools-lightbox-stage">' + '<div class="luxtools-lightbox-stage">' +
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-close" data-luxtools-action="close" aria-label="Close">×</button>' + '<div class="luxtools-lightbox-media">' +
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-prev" data-luxtools-action="prev" aria-label="Previous">‹</button>' + '<img class="luxtools-lightbox-img" alt="" />' +
'<img class="luxtools-lightbox-img" alt="" />' + '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-prev" data-luxtools-action="prev" aria-label="Previous"></button>' +
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-next" data-luxtools-action="next" aria-label="Next">›</button>' + '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-next" data-luxtools-action="next" aria-label="Next"></button>' +
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-opennew" data-luxtools-action="newtab" aria-label="Open in new tab">↗</button>' + '</div>' +
'<div class="luxtools-lightbox-caption"></div>' + '<div class="luxtools-lightbox-caption"></div>' +
'</div>'; '</div>';
@@ -109,16 +109,6 @@
cap.textContent = (it.name || '').trim(); cap.textContent = (it.name || '').trim();
} }
function openInNewTab() {
var it = items[index];
if (!it || !it.full) return;
try {
window.open(it.full, '_blank', 'noopener');
} catch (e) {
// ignore
}
}
function close() { function close() {
lb.classList.remove('is-open'); lb.classList.remove('is-open');
lb.setAttribute('aria-hidden', 'true'); lb.setAttribute('aria-hidden', 'true');
@@ -176,13 +166,12 @@
var t = e.target; var t = e.target;
if (!t || !t.getAttribute) return; if (!t || !t.getAttribute) return;
var action = t.getAttribute('data-luxtools-action') || ''; var action = t.getAttribute('data-luxtools-action') || '';
if (action === 'close') { e.preventDefault(); close(); } if (action === 'close') { e.preventDefault(); close(); return; }
if (action === 'next') { e.preventDefault(); next(); } if (action === 'next') { e.preventDefault(); next(); return; }
if (action === 'prev') { e.preventDefault(); prev(); } if (action === 'prev') { e.preventDefault(); prev(); return; }
if (action === 'newtab') { e.preventDefault(); openInNewTab(); }
// Click outside the image closes (but don't interfere with controls). // Click outside the image closes (but don't interfere with controls).
if (t.closest && t.closest('button.luxtools-lightbox-btn')) return; if (t.closest && t.closest('button.luxtools-lightbox-zone')) return;
if (t.closest && t.closest('img.luxtools-lightbox-img')) return; if (t.closest && t.closest('img.luxtools-lightbox-img')) return;
e.preventDefault(); e.preventDefault();
close(); close();

100
style.css
View File

@@ -210,11 +210,22 @@ html.luxtools-noscroll body {
padding: 0.8em; padding: 0.8em;
} }
.luxtools-lightbox img.luxtools-lightbox-img { .luxtools-lightbox .luxtools-lightbox-media {
position: relative;
display: inline-block;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
.luxtools-lightbox img.luxtools-lightbox-img {
display: block;
/* Use viewport constraints so tall images always fit.
* Percent max-height is unreliable here because the wrapper doesn't have a fixed height.
*/
max-width: calc(100vw - 1.6em);
max-height: calc(100vh - 1.6em);
}
.luxtools-lightbox .luxtools-lightbox-caption { .luxtools-lightbox .luxtools-lightbox-caption {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -230,64 +241,67 @@ html.luxtools-noscroll body {
text-align: center; text-align: center;
} }
/* Top-left "open in new tab" button. */ /* Image-anchored prev/next zones.
.luxtools-lightbox button.luxtools-lightbox-opennew { * These are sized relative to the displayed image (not the viewport) and show
left: 0.6em; * a subtle indicator only on hover/focus.
top: 0.6em; */
bottom: auto; .luxtools-lightbox button.luxtools-lightbox-zone {
width: 2.4em;
height: 2.4em;
background: transparent;
border: none;
border-radius: 0.2em;
z-index: 2;
}
.luxtools-lightbox button.luxtools-lightbox-btn {
position: absolute; position: absolute;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
/* Navigation: transparent left/right tap zones (default everywhere). */
.luxtools-lightbox button.luxtools-lightbox-prev,
.luxtools-lightbox button.luxtools-lightbox-next {
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 30%; width: 25%;
background: transparent; background: transparent;
border: none; border: none;
padding: 0; padding: 0;
font-size: 2em; cursor: pointer;
color: rgba(255, 255, 255, 0.7);
} }
.luxtools-lightbox button.luxtools-lightbox-prev { .luxtools-lightbox button.luxtools-lightbox-zone-prev {
left: 0; left: 0;
} }
.luxtools-lightbox button.luxtools-lightbox-next { .luxtools-lightbox button.luxtools-lightbox-zone-next {
right: 0; right: 0;
} }
/* Close button overlays content. */ .luxtools-lightbox button.luxtools-lightbox-zone::after {
.luxtools-lightbox button.luxtools-lightbox-close { position: absolute;
top: 0.6em; top: 50%;
right: 0.6em; transform: translateY(-50%);
width: 2.2em; font-size: 3em;
height: 2.2em; line-height: 1;
background: transparent; display: inline-flex;
border: none; justify-content: center;
z-index: 2; box-sizing: border-box;
min-height: 1.1em;
color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
padding: 0 0.28em;
text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
opacity: 0;
transition: opacity 120ms ease-in-out;
pointer-events: none;
}
.luxtools-lightbox button.luxtools-lightbox-zone-prev::after {
content: '‹';
left: 0.35em;
}
.luxtools-lightbox button.luxtools-lightbox-zone-next::after {
content: '›';
right: 0.35em;
}
.luxtools-lightbox button.luxtools-lightbox-zone:hover::after,
.luxtools-lightbox button.luxtools-lightbox-zone:focus-visible::after {
opacity: 1;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.luxtools-lightbox button.luxtools-lightbox-prev, .luxtools-lightbox button.luxtools-lightbox-zone::after {
.luxtools-lightbox button.luxtools-lightbox-next { font-size: 2.4em;
font-size: 1.6em;
} }
} }