Alpine Tailwind Lightbox

View Documentation

Basic usage:

<a
    href="#"
    class="aspect-square flex rounded-md overflow-hidden hover:opacity-80 transition-opacity"
    x-data="{ url: './assets/0.jpg', thumb: './assets/0-thumb.jpg' }"
    x-lightbox="url"
>
    <img class="flex-1 object-cover object-center" :src="thumb" alt="">
</a>

Multiple images in x-for:

<div
    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-5 mb-6"
    x-data="{
    images: [
        { url: './assets/1.jpg', thumb: './assets/1-thumb.jpg' },
        { url: './assets/2.jpg', thumb: './assets/2-thumb.jpg' },
        { url: './assets/3.jpg', thumb: './assets/3-thumb.jpg' },
        { url: './assets/4.jpg', thumb: './assets/4-thumb.jpg' },
    ],
}"
>
    <template x-for="image in images">
        <a
            href="#"
            class="aspect-square flex rounded-md overflow-hidden hover:opacity-80 transition-opacity"
            x-lightbox="image.url"
            x-lightbox:group="multiple"
        >
            <img class="flex-1 object-cover object-center" :src="image.thumb" alt="">
        </a>
    </template>
</div>

Using a config object for alt tags & videos:

<div
    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-5 mb-6"
    x-data="{
    items: [
        {
            url: 'https://www.youtube.com/embed/7yLxxyzGiko?autoplay=1&mute=1',
            thumb: 'https://i.ytimg.com/vi/7yLxxyzGiko/hq720.jpg',
            type: 'embed',
        },
        {
            url: './assets/6.mp4',
            thumb: './assets/6-thumb.jpg',
            type: 'video',
            autoplay: true,
            muted: true,
        },
        {
            url: './assets/7.jpg',
            thumb: './assets/7-thumb.jpg',
            alt: 'Black & white cat on a bright yellow background',
        },
        {
            url: './assets/8.jpg',
            thumb: './assets/8-thumb.jpg',
            alt: 'Close-up shot of a tabby cat\'s face',
        },
    ],
}"
>
    <template x-for="item in items">
        <a
            href="#"
            class="aspect-square flex rounded-md overflow-hidden hover:opacity-80 transition-opacity"
            x-lightbox="item"
            x-lightbox:group="config"
        >
            <img class="flex-1 object-cover object-center" :src="item.thumb" :alt="item.alt">
        </a>
    </template>
</div>

Creating a lightbox with $lightbox():

<div
    class="mb-6"
    x-data="{ images: ['./assets/9.jpg', './assets/10.jpg', './assets/11.jpg'] }"
    x-init="$lightbox(images, 'kittens')"
>
    <button
        type="button"
        class="px-6 py-3 bg-violet-600 rounded-md"
        @click="$lightbox.open(images[2], 'kittens')"
    >
        Open Lightbox
    </button>
</div>