Flux Lightbox

[PrinceMinky]

Below is my Lightbox for Flux UI.

Screenshots

Full README.md posted underneath.

resources\views\flux\lightbox\lightbox.blade.php

@props([
    'show' => false,
    'showCounter' => false,
    'items' => [],
    'disableZoom' => false,
    'maxThumbnails' => null, // null or 0 = no limit
    'overlayFormat' => '+:count', // future customization, default shows "+N"
])

@php
    $normalizedItems = collect($items ?? [])
        ->map(function ($item) {
            $defaults = [
                'type' => 'image',
                'src' => null,
                'caption' => '',
                'poster' => null,
                'autoplay' => false,
                'controls' => true,
                'loop' => false,
                'muted' => true,
            ];

            if (is_string($item)) {
                return array_merge($defaults, ['src' => $item]);
            }

            if (is_array($item)) {
                $type = $item['type'] ?? 'image';
                $base = [
                    'type' => $type,
                    'src' => $item['src'] ?? null,
                    'caption' => $item['caption'] ?? '',
                ];
                if ($type === 'video') {
                    $base = array_merge($base, [
                        'poster' => $item['poster'] ?? null,
                        'autoplay' => (bool)($item['autoplay'] ?? false),
                        'controls' => array_key_exists('controls', $item) ? (bool)$item['controls'] : true,
                        'loop' => (bool)($item['loop'] ?? false),
                        'muted' => array_key_exists('muted', $item) ? (bool)$item['muted'] : true,
                    ]);
                }
                return array_merge($defaults, $base);
            }

            if (is_object($item)) {
                $type = $item->type ?? 'image';
                $base = [
                    'type' => $type,
                    'src' => $item->src ?? null,
                    'caption' => $item->caption ?? '',
                ];
                if ($type === 'video') {
                    $base = array_merge($base, [
                        'poster' => $item->poster ?? null,
                        'autoplay' => (bool)($item->autoplay ?? false),
                        'controls' => isset($item->controls) ? (bool)$item->controls : true,
                        'loop' => (bool)($item->loop ?? false),
                        'muted' => isset($item->muted) ? (bool)$item->muted : true,
                    ]);
                }
                return array_merge($defaults, $base);
            }

            return null;
        })
        ->filter(fn ($i) => !empty($i['src']))
        ->values()
        ->all();

    $currentImageIndex = 0;
    $images = $normalizedItems;
@endphp

<div
    x-data="{
        show: @js($show),
        showCounter: @js($showCounter),
        disableZoom: @js($disableZoom),
        // New props for thumbnails limiting and overlay text
        maxThumbnails: @js($maxThumbnails),
        overlayFormat: @js($overlayFormat),
        images: @js($normalizedItems),
        // Computed helpers for thumbnails limiting
        get limit() { const v = this.maxThumbnails ?? null; return v && v > 0 ? Number(v) : null; },
        get hiddenCount() { return this.limit ? Math.max(0, this.count - this.limit) : 0; },
        showIndex(i) { if (!this.limit) return true; return i < this.limit; },
        isOverlayIndex(i) { if (!this.limit) return false; if (this.hiddenCount <= 0) return false; return i === this.limit - 1; },
        overlayText() { const n = this.hiddenCount; const fmt = this.overlayFormat || '+:count'; return fmt.replace(':count', String(n)); },
        index: 0,
        mediaReady: false,
        touch: { startX: 0, startY: 0, lastX: 0, lastY: 0, startTime: 0, active: false },
        swipeThreshold: 40,
        scale: 1,
        minScale: 1,
        maxScale: 5,
        tx: 0,
        ty: 0,
        isPanning: false,
        panStart: { x: 0, y: 0 },
        lastTouchDist: null,
        wheelDirection: null,
        wheelCursorTimer: null,
        get count() { return this.images.length; },
        get current() { return this.images[this.index] || null; },
        get isImage() { return !!this.current && (this.current.type ?? 'image') !== 'video'; },
        get cursor() {
            if (!this.mediaReady) return 'progress';
            if (!this.isImage) return 'default';
            if (this.disableZoom) return 'default';
            if (this.wheelDirection === 'in') return 'zoom-in';
            if (this.wheelDirection === 'out') return 'zoom-out';
            if (this.scale <= this.minScale + 0.001) return 'zoom-in';
            if (this.isPanning) return 'grabbing';
            if (this.scale > 1) return 'grab';
            if (this.scale >= this.maxScale - 0.001) return 'zoom-out';
            return 'zoom-in';
        },
        openAt(i = 0) {
            if (!this.count) return;
            this.index = Math.min(Math.max(i, 0), this.count - 1);
            // Safer body scroll locking with a reference counter
            if (!document.body.dataset.lbCount) {
                document.body.dataset.lbCount = '0';
            }
            document.body.dataset.lbCount = String(Number(document.body.dataset.lbCount) + 1);
            document.body.style.overflow = 'hidden';
            this.show = true;
            this.resetTransform();
            this.updateMediaReadyState();
        },
        openBySrc(src) {
            if (!src) return;
            const i = this.images.findIndex(img => img.src === src);
            if (i !== -1) this.openAt(i);
        },
        close() {
            this.show = false;
            this.pauseCurrentVideo();
            this.resetTransform();
            // Safer body scroll restore with reference counter
            if (document.body.dataset.lbCount) {
                const n = Math.max(0, Number(document.body.dataset.lbCount) - 1);
                if (n <= 0) {
                    document.body.style.overflow = '';
                    delete document.body.dataset.lbCount;
                } else {
                    document.body.dataset.lbCount = String(n);
                }
            } else {
                document.body.style.overflow = '';
            }
        },
        next() {
            if (!this.count) return;
            this.pauseCurrentVideo();
            this.index = (this.index + 1) % this.count;
            this.resetTransform();
            this.updateMediaReadyState();
            this.preloadAround();
        },
        prev() {
            if (!this.count) return;
            this.pauseCurrentVideo();
            this.index = (this.index - 1 + this.count) % this.count;
            this.resetTransform();
            this.updateMediaReadyState();
            this.preloadAround();
        },
        register(item) {
            if (!item?.src) return;
            const existingIndex = this.images.findIndex(i => i.src === item.src);
            const type = item.type ?? 'image';

            let enriched = null;
            if (existingIndex === -1) {
                const base = { type, src: item.src, caption: item.caption || '' };
                enriched = type === 'video'
                    ? { ...base, poster: item.poster ?? null, autoplay: !!item.autoplay, controls: item.controls ?? true, loop: !!item.loop, muted: item.muted ?? true }
                    : base;
                if (item.index !== undefined && Number.isInteger(Number(item.index))) {
                    const idx = Math.min(Math.max(Number(item.index), 0), this.images.length);
                    this.images.splice(idx, 0, enriched);
                } else {
                    this.images.push(enriched);
                }
            } else {
                // Update caption and video metadata if missing
                if (!this.images[existingIndex].caption && item.caption) {
                    this.images[existingIndex].caption = item.caption;
                }
                if (type === 'video') {
                    const t = this.images[existingIndex];
                    this.images[existingIndex] = { ...t, type: 'video', poster: item.poster ?? t.poster ?? null, autoplay: item.autoplay ?? t.autoplay ?? false, controls: item.controls ?? t.controls ?? true, loop: item.loop ?? t.loop ?? false, muted: item.muted ?? t.muted ?? true };
                }
            }

            // Preload poster for videos for smoother perceived load
            const posterToPreload = (type === 'video')
                ? (item.poster ?? (existingIndex !== -1 ? this.images[existingIndex]?.poster : enriched?.poster))
                : null;
            if (posterToPreload) {
                (new Image()).src = posterToPreload;
            }

            if (this.show && this.index === null) this.index = 0;
            this.preloadAround();
        },
        preloadAround() {
            if (!this.count) return;
            const idx = this.index ?? 0;
            [idx, (idx + 1) % this.count, (idx - 1 + this.count) % this.count].forEach(i => {
                const it = this.images[i];
                if (it && (it.type ?? 'image') !== 'video' && it.src) {
                    (new Image()).src = it.src;
                }
            });
        },
        resetTransform() {
            this.scale = 1;
            this.tx = 0;
            this.ty = 0;
            this.isPanning = false;
            this.lastTouchDist = null;
            this.wheelDirection = null;
            if (this.wheelCursorTimer) {
                clearTimeout(this.wheelCursorTimer);
                this.wheelCursorTimer = null;
            }
        },
        applyBounds() {
            const viewport = this.$refs.viewport;
            if (!viewport) return;
            const vw = viewport.clientWidth;
            const vh = viewport.clientHeight;
            const maxTx = Math.max(0, (this.scale - 1) * vw / 2);
            const maxTy = Math.max(0, (this.scale - 1) * vh / 2);
            this.tx = Math.min(Math.max(this.tx, -maxTx), maxTx);
            this.ty = Math.min(Math.max(this.ty, -maxTy), maxTy);
        },
        onWheel(e) {
            if (!this.show || !this.current) return;
            if (!this.isImage) return;
            if (this.disableZoom) return;
            e.preventDefault();
            const viewport = this.$refs.viewport;
            if (!viewport) return;
            const rect = viewport.getBoundingClientRect();
            const cx = e.clientX - (rect.left + rect.width / 2);
            const cy = e.clientY - (rect.top + rect.height / 2);
            const direction = e.deltaY > 0 ? -1 : 1;
            const zoomIntensity = 0.15;
            this.wheelDirection = direction === 1 ? 'in' : 'out';
            if (this.wheelCursorTimer) clearTimeout(this.wheelCursorTimer);
            this.wheelCursorTimer = setTimeout(() => { this.wheelDirection = null; this.wheelCursorTimer = null }, 250);
            const prevScale = this.scale;
            const nextScale = Math.min(this.maxScale, Math.max(this.minScale, prevScale + direction * zoomIntensity));
            if (prevScale === nextScale) return;
            const wx = (cx - this.tx) / prevScale;
            const wy = (cy - this.ty) / prevScale;
            this.scale = nextScale;
            this.tx = cx - wx * nextScale;
            this.ty = cy - wy * nextScale;
            this.applyBounds();
        },
        onDblClick(e) {
            if (!this.current) return;
            if (!this.isImage) return;
            if (this.disableZoom) return;
            const viewport = this.$refs.viewport;
            if (!viewport) return;
            const rect = viewport.getBoundingClientRect();
            const cx = e.clientX - (rect.left + rect.width / 2);
            const cy = e.clientY - (rect.top + rect.height / 2);
            const prevScale = this.scale;
            const nextScale = this.scale > 1 ? 1 : 2;
            const wx = (cx - this.tx) / prevScale;
            const wy = (cy - this.ty) / prevScale;
            this.scale = nextScale;
            this.tx = cx - wx * nextScale;
            this.ty = cy - wy * nextScale;
            this.applyBounds();
        },
        onMouseDown(e) {
            if (this.scale === 1) return;
            this.isPanning = true;
            this.panStart = { x: e.clientX - this.tx, y: e.clientY - this.ty };
        },
        onMouseMove(e) {
            if (!this.isPanning) return;
            this.tx = e.clientX - this.panStart.x;
            this.ty = e.clientY - this.panStart.y;
            this.applyBounds();
        },
        onMouseUp() { this.isPanning = false; },
        onMouseLeave() { this.isPanning = false; },
        // Root overlay swipe handlers (for navigating prev/next)
        onTouchStart(e) {
            if (!this.show) { return; }
            if (!e.touches || e.touches.length !== 1) {
                this.touch.active = false;
                return;
            }
            const t = e.touches[0];
            this.touch.startX = t.clientX;
            this.touch.startY = t.clientY;
            this.touch.lastX = t.clientX;
            this.touch.lastY = t.clientY;
            this.touch.startTime = Date.now();
            this.touch.active = true;
        },
        onTouchMove(e) {
            if (!this.touch.active) { return; }
            if (!e.touches || e.touches.length !== 1) { return; }
            const t = e.touches[0];
            this.touch.lastX = t.clientX;
            this.touch.lastY = t.clientY;
        },
        onTouchEnd(e) {
            if (!this.touch.active) { return; }
            this.touch.active = false;
            // Don't swipe if zoomed or panning image
            if (this.scale > 1) { return; }
            const endX = this.touch.lastX ?? this.touch.startX;
            const endY = this.touch.lastY ?? this.touch.startY;
            const dx = endX - this.touch.startX;
            const dy = endY - this.touch.startY;
            const adx = Math.abs(dx);
            const ady = Math.abs(dy);
            // Require mostly horizontal movement and pass threshold
            if (adx < this.swipeThreshold || adx < ady) { return; }
            if (dx < 0) {
                // swipe left -> next
                this.next();
            } else {
                // swipe right -> prev
                this.prev();
            }
        },
        onTouchStartPan(e) {
            if (!this.show) return;
            if (!this.isImage) return;
            if (e.touches.length === 2) {
                if (this.disableZoom) return;
                const [a, b] = e.touches;
                this.lastTouchDist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
            } else if (e.touches.length === 1 && this.scale > 1) {
                const t = e.touches[0];
                this.isPanning = true;
                this.panStart = { x: t.clientX - this.tx, y: t.clientY - this.ty };
            }
        },
        onTouchMovePan(e) {
            if (!this.isImage) return;
            if (e.touches.length === 2) {
                if (this.disableZoom) return;
                const [a, b] = e.touches;
                const dist = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
                if (this.lastTouchDist != null) {
                    const delta = (dist - this.lastTouchDist) / 200;
                    const prev = this.scale;
                    this.scale = Math.min(this.maxScale, Math.max(this.minScale, this.scale + delta));
                    if (this.scale !== prev) this.applyBounds();
                }
                this.lastTouchDist = dist;
            } else if (e.touches.length === 1 && this.isPanning) {
                const t = e.touches[0];
                this.tx = t.clientX - this.panStart.x;
                this.ty = t.clientY - this.panStart.y;
                this.applyBounds();
            }
        },
        onTouchEndPan(e) {
            if (e.touches.length < 2) this.lastTouchDist = null;
            if (e.touches.length === 0) this.isPanning = false;
        },
        pauseCurrentVideo() {
            const v = this.$refs.video;
            if (v && typeof v.pause === 'function') {
                try { v.pause(); } catch (e) {}
                try { v.currentTime = 0; } catch (e) {}
            }
        },
        updateMediaReadyState() {
            this.mediaReady = false;
            this.$nextTick(() => {
                if (this.isImage) {
                    const img = this.$refs.full;
                    if (img && img.complete && img.naturalWidth !== 0) {
                        this.mediaReady = true;
                    }
                } else {
                    const v = this.$refs.video;
                    if (v && v.readyState >= 2) { // HAVE_CURRENT_DATA
                        this.mediaReady = true;
                    }
                }
            });
        }
    }"
    x-on:lightbox-register="register($event.detail)"
    x-on:lightbox-open="openAt(($event.detail?.index) || 0)"
    x-on:lightbox-open-src="openBySrc($event.detail?.src)"
    x-on:keydown.escape.window.prevent="if (show) { close() }"
    x-on:keydown.arrow-left.window.prevent="if (show) { prev() }"
    x-on:keydown.arrow-right.window.prevent="if (show) { next() }"
    x-init="if(show && count>0 && index===null) index=0"
    class="relative"
>
    <!-- Hidden registration area: keep original children/items to dispatch lightbox-register events, but don't show them -->
    <div class="hidden" aria-hidden="true">
        @if (isset($slot) && $slot->isNotEmpty())
            {{ $slot }}
        @elseif (!empty($normalizedItems))
            @foreach ($normalizedItems as $it)
                @if (($it['type'] ?? 'image') === 'video')
                    <flux:lightbox.video
                        src="{{ $it['src'] }}"
                        caption="{{ $it['caption'] }}"
                        poster="{{ $it['poster'] ?? null }}"
                        :enable-autoplay="(bool)($it['autoplay'] ?? false)"
                    />
                @else
                    <flux:lightbox.image src="{{ $it['src'] }}" caption="{{ $it['caption'] }}" />
                @endif
            @endforeach
        @endif
    </div>

    <!-- Visible thumbnails (limited by maxThumbnails) -->
    <div class="flex flex-wrap gap-2 items-center">
        <template x-for="(it, i) in images" :key="it.src">
            <div x-show="showIndex(i)" class="relative">
                <button type="button"
                    class="relative w-32 h-20 rounded-md overflow-hidden shadow outline-none focus:ring-2 focus:ring-primary-500"
                    :aria-label="it.caption ? 'Open ' + it.caption : 'Open media ' + (i+1)"
                    @click="openAt(i)"
                >
                    <template x-if="(it.type ?? 'image') !== 'video'">
                        <img :src="it.src" :alt="it.caption || 'Image'" class="absolute inset-0 w-full h-full object-cover" :class="isOverlayIndex(i) ? 'blur-[2px] scale-[1.02]' : ''" loading="lazy" draggable="false" />
                    </template>
                    <template x-if="(it.type ?? 'image') === 'video'">
                        <img :src="it.poster || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='" :alt="it.caption || 'Video'" class="absolute inset-0 w-full h-full object-cover" :class="isOverlayIndex(i) ? 'blur-[2px] scale-[1.02]' : ''" loading="lazy" draggable="false" />
                    </template>

                    <!-- Play icon for video thumbnails -->
                    <div x-show="(it.type ?? 'image') === 'video'" class="absolute inset-0 grid place-items-center">
                        <div class="bg-black/40 rounded-full p-1.5">
                            <flux:icon name="play" class="w-4 h-4 text-white" />
                        </div>
                    </div>

                    <!-- +N overlay on the last visible thumb when there are hidden items -->
                    <div x-show="isOverlayIndex(i)" class="absolute inset-0 grid place-items-center">
                        <div class="absolute inset-0 bg-black/45 backdrop-blur-[2px]"></div>
                        <span class="relative z-10 text-white text-sm font-medium select-none" x-text="overlayText()"></span>
                    </div>
                </button>
            </div>
        </template>
    </div>

    <div
        x-show="show"
        x-cloak
        x-transition:enter="transition ease-out duration-[200ms] motion-reduce:duration-0"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-[200ms] motion-reduce:duration-0"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        role="dialog"
        aria-modal="true"
        :aria-label="current?.caption || 'Lightbox'"
        class="fixed inset-0 z-50 flex items-center justify-center"
        style="display: none;"
        x-on:touchstart.passive="onTouchStart($event)"
        x-on:touchmove.passive="onTouchMove($event)"
        x-on:touchend.passive="onTouchEnd($event)"
    >
        <div class="absolute inset-0 bg-black/80" x-on:click="close()"></div>

        <div class="relative z-10 max-w-[90vw] max-h-[80vh] flex flex-col items-center gap-3 p-4">
            <div
                x-ref="viewport"
                x-show="current"
                x-transition:enter="transition ease-out duration-[200ms]"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-[200ms]"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                :class="{
                    'shadow-xl': mediaReady && isImage && scale === 1,
                    'cursor-zoom-in': cursor==='zoom-in',
                    'cursor-zoom-out': cursor==='zoom-out',
                    'cursor-grab': cursor==='grab',
                    'cursor-grabbing': cursor==='grabbing',
                    'cursor-progress': cursor==='progress'
                }"
                class="relative max-w-[90vw] max-h-[70vh] w-[90vw] h-[70vh] overflow-hidden rounded-md touch-none select-none bg-black"
                @wheel="onWheel($event)"
                @dblclick="onDblClick($event)"
                @mousedown="onMouseDown($event)"
                @mousemove="onMouseMove($event)"
                @mouseup="onMouseUp()"
                @mouseleave="onMouseLeave()"
                @touchstart.passive="onTouchStartPan($event)"
                @touchmove.prevent="onTouchMovePan($event)"
                @touchend="onTouchEndPan($event)"
                @touchcancel="onTouchEndPan($event)"
            >
                <div x-show="!mediaReady && (isImage || (current && current.poster))" class="absolute inset-0 grid place-items-center pointer-events-none">
                    <flux:skeleton animate="shimmer" class="w-full h-full rounded-md" />
                </div>

                <div x-show="!mediaReady && !isImage && !(current && current.poster)" class="absolute inset-0 grid place-items-center">
                    <div class="relative w-full h-full rounded-md overflow-hidden bg-neutral-900/80">
                        <div class="absolute -inset-10 bg-white/10 blur-2xl"></div>
                        <div class="relative z-10 grid place-items-center h-full">
                            <div class="bg-black/50 rounded-full p-3">
                                <flux:icon name="play" class="w-7 h-7 text-white" />
                            </div>
                        </div>
                    </div>
                </div>

                <template x-if="show && isImage">
                    <img
                        x-ref="full"
                        :key="current?.src"
                        :src="current?.src"
                        :alt="current?.caption || 'Image'"
                        class="w-full h-full object-contain will-change-transform transition-opacity ease-out duration-[200ms]"
                        :class="mediaReady ? 'opacity-100' : 'opacity-0'"
                        @load="if ($el.src === (current?.src ?? '')) mediaReady = true"
                        :style="`transform: translate(${tx}px, ${ty}px) scale(${scale}); transform-origin: center center;`"
                        draggable="false"
                    >
                </template>

                <template x-if="show && !isImage">
                    <video
                        x-ref="video"
                        :key="current?.src"
                        :src="current?.src"
                        :poster="current?.poster || null"
                        :autoplay="current?.autoplay ?? false"
                        :controls="current?.controls ?? true"
                        :loop="current?.loop ?? false"
                        :muted="current?.muted ?? true"
                        playsinline
                        class="w-full h-full object-contain transition-opacity ease-out duration-[200ms]"
                        :class="mediaReady ? 'opacity-100' : 'opacity-0'"
                        @loadeddata="if ($el.currentSrc === (current?.src ?? '')) mediaReady = true"
                    ></video>
                </template>

                <!-- Zoom Reset Button -->
                <div
                    class="absolute bottom-3 right-3 z-20"
                    x-show="scale !== 1 || tx !== 0 || ty !== 0"
                    x-transition
                >
                    <flux:button
                        size="sm"
                        title="Reset Zoom"
                        icon="arrow-uturn-left"
                        x-on:click="resetTransform()"
                    />
                </div>
            </div>

            <div x-show="current?.caption" class="text-white/90 text-sm" x-text="current.caption" style="display: none;"></div>

            <div x-show="showCounter && count" class="fixed inset-x-0 bottom-4 z-50 flex justify-center text-white/75 text-xs pointer-events-none" style="display: none;">
                <span class="bg-black/60 rounded px-2 py-1 pointer-events-auto">
                    <span x-text="index + 1"></span>
                    <span class="mx-1">of</span>
                    <span x-text="count"></span>
                    <span class="ml-1">items</span>
                </span>
            </div>

            <div class="fixed left-2 top-1/2 -translate-y-1/2 z-50" x-on:click.stop="prev()">
                @isset($previousButton)
                    {{ $previousButton }}
                @else
                    <flux:button size="sm" title="Previous (←)" icon="arrow-left-circle" />
                @endisset
            </div>
            <div class="fixed right-2 top-1/2 -translate-y-1/2 z-50" x-on:click.stop="next()">
                @isset($nextButton)
                    {{ $nextButton }}
                @else
                    <flux:button size="sm" title="Next (→)" icon="arrow-right-circle" />
                @endisset
            </div>
            <div class="fixed top-3 right-3 z-50" x-on:click="close()">
                @isset($closeButton)
                    {{ $closeButton }}
                @else
                    <flux:button size="sm" title="Close (Esc)" icon="x-circle" />
                @endisset
            </div>
        </div>
    </div>
</div>

resources/views/flux/lightbox/image.blade.php

@props([
    'src' => null,
    'caption' => '',
    'thumbClass' => 'w-32 h-20 object-cover rounded-md shadow cursor-pointer',
])

<div
    x-data="{ loaded: false }"
    x-init="
        $dispatch('lightbox-register', { type: 'image', src: @js($src), caption: @js($caption) });
        // If image is cached, mark as loaded immediately
        const img = $el.querySelector('img');
        if (img && img.complete) { this.loaded = true; }
    "
    @click="$dispatch('lightbox-open-src', { src: @js($src) })"
    class="inline-block"
>
    <div x-show="!loaded" class="{{ $thumbClass }}">
        <flux:skeleton animate="shimmer" class="{{ $thumbClass }}" />
    </div>

    <img
        src="{{ $src }}"
        alt="{{ $caption }}"
        class="{{ $thumbClass }}"
        loading="lazy"
        @load="loaded = true"
        x-show="loaded"
        draggable="false"
    >
</div>

resources/views/flux/lightbox/video.blade.php

@props([
    'src' => null,
    'caption' => '',
    'poster' => null,
    // Note: width/height should be applied to a wrapper so image & placeholder both fill identically
    'thumbClass' => 'w-32 h-20 rounded-md shadow cursor-pointer',
    'enableAutoplay' => false,
])

<div
    x-data="{ loaded: false }"
    x-init="
        $dispatch('lightbox-register', {
            type: 'video',
            src: @js($src),
            caption: @js($caption),
            poster: @js($poster),
            autoplay: @js((bool) $enableAutoplay),
            controls: true,
            loop: false,
            muted: true,
        });
        if (@js($poster) === null) {
            this.loaded = true;
        } else {
            const img = $el.querySelector('img');
            if (img && img.complete) { this.loaded = true; }
        }
    "
    @click="$dispatch('lightbox-open-src', { src: @js($src) })"
    class="inline-block relative"
>
    <div class="{{ $thumbClass }} relative overflow-hidden">
        @if ($poster)
            <!-- Loading skeleton, same size as wrapper -->
            <div x-show="!loaded" class="absolute inset-0">
                <flux:skeleton animate="shimmer" class="w-full h-full" />
            </div>

            <img
                src="{{ $poster }}"
                alt="{{ $caption }}"
                class="absolute inset-0 w-full h-full object-cover"
                loading="lazy"
                @load="loaded = true"
                x-show="loaded"
                draggable="false"
            >
        @else
            <!-- Posterless placeholder, same size as wrapper -->
            <div class="absolute inset-0 grid place-items-center bg-neutral-800/80 text-white">
                <div class="absolute -inset-8 bg-white/10 rounded-full blur-2xl"></div>
                <div class="relative z-10">
                    <flux:icon name="play" class="w-6 h-6 opacity-90" />
                </div>
            </div>
        @endif

        <!-- Play overlay icon -->
        <div class="absolute inset-0 grid place-items-center pointer-events-none" x-show="loaded">
            <div class="bg-black/40 rounded-full p-2">
                <flux:icon name="play" class="w-5 h-5 text-white" />
            </div>
        </div>
    </div>
</div>

[PrinceMinky]

Flux Lightbox

A lightweight, Alpine-powered lightbox built for Flux UI components. It supports:

• Mixed media: images and videos with captions
• Dedicated video support (poster thumbnails, autoplay, controls, loop, muted)
• Keyboard navigation (Esc, ←, →)
• Touch swipes (←/→)
• Lazy-loading with shimmer skeletons
• Programmatic open by index or by source
• Customizable buttons and counter via slots
• Configurable thumbnail sizing, including max dimensions, via thumbClass
• Zoom and pan on full-size images (wheel/double-click to zoom; drag to pan; pinch on touch) — images only

This component set consists of:

• flux:lightbox — the overlay/lightbox container
• flux:lightbox.image — an image thumbnail that auto-registers itself with the nearest lightbox
• flux:lightbox.video — a video thumbnail (with optional poster) that auto-registers itself

Note: Thumbnails are optional. You can also pass an array of items to the lightbox.

---

Basic Usage

Render a lightbox with an array of media items (images or videos):

<flux:lightbox :items="[
    ['src' => asset('images/one.jpg'), 'caption' => 'First'],
    ['src' => asset('images/two.jpg'), 'caption' => 'Second'],
]" show-counter />

The example above will:

• Render two thumbnails automatically (since items is provided)
• Open the overlay when a thumbnail is clicked
• Show a small counter at the bottom (because show-counter truthy)

You can also render your own thumbnails by using the default slot:

<flux:lightbox show-counter>
    <flux:lightbox.image src="{{ asset('images/one.jpg') }}" caption="First" />
    <flux:lightbox.image src="{{ asset('images/two.jpg') }}" caption="Second" />
</flux:lightbox>

Thumbnails register themselves with the nearest flux:lightbox automatically and display a shimmer skeleton until the image is loaded.

---

Props

flux:lightbox

• show (bool, default: false) — Initial visibility of the lightbox overlay.
• showCounter (bool, default: false) — Show an X of Y items counter in the overlay.
• items (array|string[]) — List of media items. Each item can be:
  • A string image source: "/path/to/image.jpg" (defaults to type: 'image')
  • An array/object with fields:
    • Common: type ('image'|'video', default 'image'), src (required), caption?
    • Video-only: poster?, autoplay? (default false), controls? (default true), loop? (default false), muted? (default true)
• disableZoom (bool, default: false) — Disable zooming / panning on full-size images. Zoom is always disabled for videos.

If a slot is provided, the component will render the slot instead of auto-generating thumbnails from items. Order of items in the lightbox will match the slot order.

flux:lightbox.image

• src (string, required) — Thumbnail and full image source.
• caption (string, default: '') — Used as the full image caption and the <img alt> text.
• thumbClass (string, default: "w-32 h-20 object-cover rounded-md shadow cursor-zoom-in") — Tailwind classes for the thumbnail (and its skeleton shimmer placeholder).

flux:lightbox.video

• src (string, required) — Video source URL (MP4 etc.).
• caption (string, default: '') — Used as the caption.
• poster (string, default: null) — Optional poster image used in the thumbnail and in the <video> element.
• thumbClass (string, default: "w-32 h-20 object-cover rounded-md shadow cursor-pointer").

Videos default to controls: true, autoplay: false, loop: false, muted: true (especially important when enabling autoplay due to browser policies).

---

Keyboard & Touch

• Esc — Close
• ← — Previous
• → — Next
• Swipe left — Next
• Swipe right — Previous

Images are preloaded for the current, previous, and next positions to help reduce flicker.

---

Zoom & Pan

• Mouse wheel to zoom in/out (smooth, clamped between 1× and 5×)
• Double-click to toggle zoom (1× ↔ 2×)
• Click and drag to pan when zoomed
• Touch pinch to zoom; one-finger drag to pan when zoomed
• Swipe navigation is automatically disabled while zoomed-in to prevent accidental navigation

Tips to avoid flicker:

• We keep a skeleton until the full image has actually fired load or is already cached.
• The current, previous, and next images are preloaded in the background.
• Transforms are reset when navigating to another image.

---

Programmatic Control

Open the lightbox at a specific index:

<!-- Anywhere in the page -->
<button x-on:click="$dispatch('lightbox-open', { index: 0 })">Open First Image</button>

Open by image src:

<button x-on:click="$dispatch('lightbox-open-src', { src: '/images/one.jpg' })">Open by Src</button>

Both events are listened to at window level, so you can dispatch from anywhere.

---

Slots (Overridables)

You can override specific UI regions of the overlay using named slots. If a slot is not provided, sensible Flux UI defaults are used.

• prevButton — Previous navigation button
• nextButton — Next navigation button
• closeButton — Close button
• counter — The counter UI shown at the bottom when showCounter is truthy

Example:

<flux:lightbox :items="[
    ['src' => asset('images/one.jpg'), 'caption' => 'One'],
    ['src' => asset('images/two.jpg'), 'caption' => 'Two'],
]" show-counter>
    @slot('prevButton')
        <flux:button size="sm" variant="ghost" icon="chevron-left" title="Prev" />
    @endslot

    @slot('nextButton')
        <flux:button size="sm" variant="ghost" icon="chevron-right" title="Next" />
    @endslot

    @slot('closeButton')
        <flux:button size="sm" variant="ghost" icon="x" title="Close" />
    @endslot

    @slot('counter')
        <div class="fixed inset-x-0 bottom-4 z-50 flex justify-center text-white/80 text-xs">
            <span class="bg-black/60 rounded px-2 py-1">
                <span x-text="index + 1"></span>
                <span class="mx-1">/</span>
                <span x-text="count"></span>
            </span>
        </div>
    @endslot
</flux:lightbox>

---

Thumbnails Only (Manual Layout)

You can render thumbnails wherever you like (grid, masonry, etc.) inside the default slot; clicking them will open the overlay at the corresponding image.

<flux:lightbox>
    <div class="grid grid-cols-3 gap-3">
        <flux:lightbox.image src="{{ asset('gallery/a.jpg') }}" caption="A" />
        <flux:lightbox.image src="{{ asset('gallery/b.jpg') }}" caption="B" />
        <flux:lightbox.image src="{{ asset('gallery/c.jpg') }}" caption="C" />
    </div>
</flux:lightbox>

---

Notes

• The body overflow is disabled while the lightbox is open to prevent background scroll bleed.
• The full image element uses a shimmer skeleton until the image actually loads (or instantly if cached).
• Alt text mirrors the caption for accessibility; provide meaningful captions where possible.

---

Coming Soon

• Optional grouping across multiple lightboxes
• Improved focus management and ARIA attributes

---

File Locations

• Container: resources/views/flux/lightbox/lightbox.blade.php
• Thumbnail: resources/views/flux/lightbox/image.blade.php

If you do not see UI changes during development, ensure your frontend is recompiled or running:

• npm run dev (recommended during development)
• npm run build (for production)
• Or composer run dev if your project is set up that way

---

Video Support

The lightbox has first-class video support:

• Poster thumbnails (with shimmer skeletons until the poster loads)
• Play overlay icon on hover/idle
• Sensible defaults: controls: true, autoplay: false, loop: false, muted: true
• Autoplay-ready: browsers generally require muted videos to autoplay; this component ensures muted is true when you enable autoplay

Usage examples:

{{-- Using the items array --}}
<flux:lightbox :items="[
    ['type' => 'video', 'src' => asset('videos/teaser.mp4'), 'poster' => asset('images/teaser.jpg'), 'caption' => 'Teaser', 'autoplay' => false, 'controls' => true],
]" />

{{-- Using the dedicated video thumbnail component --}}
<flux:lightbox>
    <flux:lightbox.video
        src="{{ asset('videos/teaser.mp4') }}"
        poster="{{ asset('images/teaser.jpg') }}"
        caption="Teaser"
        :enable-autoplay="false"
    />
</flux:lightbox>

Notes:

• When opened, videos render inside the overlay using the supplied poster, autoplay, controls, loop, and muted flags.
• Zoom is disabled for videos; pan/zoom applies only to images.

---

Thumbnail sizing and max dimensions

Thumbnails are fully controllable via the thumbClass prop on both flux:lightbox.image and flux:lightbox.video.

• Apply fixed sizes with w-* and h-* utilities.
• Constrain sizes with max-w-* and max-h-* to enforce maximum thumbnail dimensions.
• Use aspect-* (for example, aspect-video) for consistent cropping ratios.
• Pair with object-cover to ensure the media fills the frame without distortion.

Examples:

{{-- Fixed size thumbnail --}}
<flux:lightbox.image
    src="{{ asset('gallery/one.jpg') }}"
    caption="One"
    thumbClass="w-40 h-28 object-cover rounded-md shadow cursor-zoom-in"
/>

{{-- Max-sized thumbnail (will not exceed these dimensions) --}}
<flux:lightbox.video
    src="{{ asset('videos/clip.mp4') }}"
    poster="{{ asset('images/clip-poster.jpg') }}"
    caption="Clip"
    thumbClass="max-w-48 max-h-32 aspect-video rounded-md shadow cursor-pointer"
/>

Tips:

• If you pass an items array, thumbnails are auto-generated with sensible defaults. For complete control over thumbnail sizing (including max dimensions), prefer rendering your own thumbnails in the default slot as shown above.
• The thumbClass applies to the thumbnail frame and its skeleton placeholder, keeping alignment consistent while loading.