Pick an action to apply. Each one shows exactly what will change.
↶Undo
Loading…
↷Redo
Loading…
{
// Three-zone tap nav spanning the ENTIRE lightbox (photo
// + the black backdrop on either side). User wants the
// big dead space next to the photo to navigate too, not
// just the narrow image area. Children with @click.stop
// (close button, arrows, download/copy, photo content)
// keep their own behavior since .stop halts the bubble.
var lb = $store.lightbox;
var rect = $event.currentTarget.getBoundingClientRect();
var relX = ($event.clientX - rect.left) / rect.width;
if (lb.total > 1) {
if (relX < 0.33) { lb.prev(); return; }
if (relX > 0.67) { lb.next(); return; }
}
lb.close();
})()"
@keydown.escape.window="$store.lightbox.close()"
@keydown.arrow-left.window="if ($store.lightbox.show) $store.lightbox.prev()"
@keydown.arrow-right.window="if ($store.lightbox.show) $store.lightbox.next()"
x-transition:enter="rf-lightbox-enter"
x-transition:enter-start="rf-lightbox-enter-start"
x-transition:enter-end="rf-lightbox-enter-end"
x-transition:leave="rf-lightbox-leave"
x-transition:leave-start="rf-lightbox-leave-start"
x-transition:leave-end="rf-lightbox-leave-end"
role="dialog" aria-label="Photo viewer">