A simple lightbox for AlpineJS and Tailwind CSS projects.
npm install alpine-tailwind-lightboxA simple lightbox for AlpineJS and Tailwind CSS projects.
* AlpineJS 3.x
* AlpineJS Focus Plugin
* Tailwind CSS
* Installation
* Demo
* Usage
* Config Object
* Magics
* License
#### 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
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
#### 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
#### 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.
| Option | Type | Default | Description |
|--------------|-----------|---------|---------------------------------------------------------------------------------------------------------------------|
| url | string | | The media URL. |string
| type | | image | The media type. image, video or embed. |string?
| group | | null | The lightbox group the item should be added to. If omitted, the item is added to the default lightbox. |boolean
| lazy | | false | Indicates whether to delay fetching the image until it is opened. Only applies to the image type. |boolean
| muted | | false | Determines whether the video should be muted by default. Only applies to the video type. |boolean
| autoplay | | false | Determines whether the video should play automatically upon opening the lightbox. Only applies to the video type. |
There are magic functions available for controlling lightboxes programmatically.
#### Parameters
| Parameter | Type | Default | Description |
|-----------|----------------------|---------|---------------------------------------------------------------------------------------------|
| items | (string\|object)[] | | An array of URLs or config objects. |string\|null
| group | | 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)"
>
> If there are also lightbox items created via
x-lightbox targeting the same group (default or named), the items will be merged.$3
#### Parameters
| Parameter | Type | Default | Description |
|--------------|-----------------------------|---------|-------------------------------------------------------------------------------------------------------|
| urlOrRef |
string\|HTMLElement\|null | null | The URL or element ref of the item to open. If null, the first item in the lightbox will be opened. |
| group | string\|null | null | The name of the lightbox group. If null, the default lightbox will be opened. |#### Example Usage
`html

``This project is licensed under the MIT License. See the LICENSE file for details.