alpine-tailwind-lightbox

A simple lightbox for AlpineJS and Tailwind CSS projects.

$3

* AlpineJS 3.x
* AlpineJS Focus Plugin
* Tailwind CSS

$3

* Installation
* Demo
* Usage
* Config Object
* Magics
* License

Installation

#### CDN

``html





`

#### Module

Install the package:

`shell
npm install alpine-tailwind-lightbox
`

Then import and initialize the plugin:

`js
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'
import lightbox from 'alpine-tailwind-lightbox'

Alpine.plugin(focus)
Alpine.plugin(lightbox)

Alpine.start()
`

#### Styles

Make sure Tailwind can pick up the CSS classes by adding the lightbox HTML to your tailwind.config.js:

`js
module.exports = {
content: [
// ...
'./node_modules/alpine-tailwind-lightbox/src/template.html',
],
// ...
}
`


Demo

View Demo


Usage

You can create a lightbox by simply passing a URL to the x-lightbox directive. A click handler will automatically be added to the element with the directive.

`html

Open Image

`

> Note the single quotes around the URL. It is parsed as a JavaScript expression so you can pass Alpine data or an object as below.

For more options, you can pass an object to the lightbox (see the Config Object reference):

`html

Open Image



Open Video

`

#### Lightbox Groups

By default, all items will be added to the same "default" lightbox. If you want to create separate lightbox instances on the same page, you can specify a group:

`html

View the Cats



View the Dogs

`

#### Lazy Loading Images

By default, all images will be fetched in the background on page load. To only fetch an image when it is opened, use the lazy modifier (or the lazy config property):

`html

Open Image

`

For smoother navigation between images, when an image is opened this will also load the previous and next image in the lightbox.

#### Programmatic Creation

It is possible to create a lightbox without needing a DOM element per item. See Magics.

Config Object

| Option | Type | Default | Description |
|--------------|-----------|---------|---------------------------------------------------------------------------------------------------------------------|
| url | string | | The media URL. |
| type | string | image | The media type. image, video or embed. |
| group | string? | null | The lightbox group the item should be added to. If omitted, the item is added to the default lightbox. |
| lazy | boolean | false | Indicates whether to delay fetching the image until it is opened. Only applies to the image type. |
| muted | boolean | false | Determines whether the video should be muted by default. Only applies to the video type. |
| autoplay | boolean | false | Determines whether the video should play automatically upon opening the lightbox. Only applies to the video type. |

Magics

There are magic functions available for controlling lightboxes programmatically.

$3

#### Parameters

| Parameter | Type | Default | Description |
|-----------|----------------------|---------|---------------------------------------------------------------------------------------------|
| items | (string\|object)[] | | An array of URLs or config objects. |
| group | string\|null | null | The name of the lightbox group. If null, the items will be added to the default lightbox. |

#### Example Usage

`html
x-data="{ images: ['./image1.jpg', './image2.jpg', './image3.jpg'] }"
x-init="$lightbox(images)"
>