diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig index 3f4d007..a963138 100644 --- a/themes/intotheeast/templates/dailies.html.twig +++ b/themes/intotheeast/templates/dailies.html.twig @@ -110,6 +110,17 @@ const lightbox = new PhotoSwipeLightbox({ children: 'a.journal-photo-slide', pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js') }); +lightbox.on('afterOpen', function () { + var container = lightbox.pswp.element.querySelector('.pswp__container'); + function onKey(e) { + if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; + container.style.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.22, 1)'; + container.getBoundingClientRect(); + setTimeout(function () { container.style.transition = ''; }, 400); + } + document.addEventListener('keydown', onKey, true); + lightbox.pswp.on('close', function () { document.removeEventListener('keydown', onKey, true); }); +}); lightbox.init(); /* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */ diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig index 9614745..33ca3fd 100644 --- a/themes/intotheeast/templates/home.html.twig +++ b/themes/intotheeast/templates/home.html.twig @@ -145,6 +145,17 @@ const lightbox = new PhotoSwipeLightbox({ children: 'a.journal-photo-slide', pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js') }); +lightbox.on('afterOpen', function () { + var container = lightbox.pswp.element.querySelector('.pswp__container'); + function onKey(e) { + if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; + container.style.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.22, 1)'; + container.getBoundingClientRect(); + setTimeout(function () { container.style.transition = ''; }, 400); + } + document.addEventListener('keydown', onKey, true); + lightbox.pswp.on('close', function () { document.removeEventListener('keydown', onKey, true); }); +}); lightbox.init(); document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) { diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index 4f38710..97a6ee7 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -514,6 +514,17 @@ const lightbox = new PhotoSwipeLightbox({ children: 'a.journal-photo-slide', pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js') }); +lightbox.on('afterOpen', function () { + var container = lightbox.pswp.element.querySelector('.pswp__container'); + function onKey(e) { + if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return; + container.style.transition = 'transform 0.35s cubic-bezier(0.4, 0, 0.22, 1)'; + container.getBoundingClientRect(); // force reflow so browser commits current position as "from" + setTimeout(function () { container.style.transition = ''; }, 400); + } + document.addEventListener('keydown', onKey, true); + lightbox.pswp.on('close', function () { document.removeEventListener('keydown', onKey, true); }); +}); lightbox.init(); document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {