Ajust lightbox
This commit is contained in:
29
script.js
29
script.js
@@ -56,11 +56,11 @@
|
||||
root.innerHTML =
|
||||
'<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' +
|
||||
'<div class="luxtools-lightbox-stage">' +
|
||||
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-close" data-luxtools-action="close" aria-label="Close">×</button>' +
|
||||
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-prev" data-luxtools-action="prev" aria-label="Previous">‹</button>' +
|
||||
'<img class="luxtools-lightbox-img" alt="" />' +
|
||||
'<button type="button" class="luxtools-lightbox-btn luxtools-lightbox-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 class="luxtools-lightbox-media">' +
|
||||
'<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-zone luxtools-lightbox-zone-next" data-luxtools-action="next" aria-label="Next"></button>' +
|
||||
'</div>' +
|
||||
'<div class="luxtools-lightbox-caption"></div>' +
|
||||
'</div>';
|
||||
|
||||
@@ -109,16 +109,6 @@
|
||||
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() {
|
||||
lb.classList.remove('is-open');
|
||||
lb.setAttribute('aria-hidden', 'true');
|
||||
@@ -176,13 +166,12 @@
|
||||
var t = e.target;
|
||||
if (!t || !t.getAttribute) return;
|
||||
var action = t.getAttribute('data-luxtools-action') || '';
|
||||
if (action === 'close') { e.preventDefault(); close(); }
|
||||
if (action === 'next') { e.preventDefault(); next(); }
|
||||
if (action === 'prev') { e.preventDefault(); prev(); }
|
||||
if (action === 'newtab') { e.preventDefault(); openInNewTab(); }
|
||||
if (action === 'close') { e.preventDefault(); close(); return; }
|
||||
if (action === 'next') { e.preventDefault(); next(); return; }
|
||||
if (action === 'prev') { e.preventDefault(); prev(); return; }
|
||||
|
||||
// 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;
|
||||
e.preventDefault();
|
||||
close();
|
||||
|
||||
Reference in New Issue
Block a user