{"_id":"alpine-tailwind-lightbox","_rev":"8-bb403e4d082c05cca1e03fe7e8589bc3","name":"alpine-tailwind-lightbox","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.0":{"name":"alpine-tailwind-lightbox","version":"1.0.0","keywords":["Alpine","Alpine JS","Lightbox"],"license":"MIT","_id":"alpine-tailwind-lightbox@1.0.0","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"dist":{"shasum":"56fc41619f15f949717918b087496c4948717131","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.0.0.tgz","fileCount":10,"integrity":"sha512-0M2eRMPB/dDgdNmnxpb0H4l5IqnJ2PkAVsqMJQG0vlWFvc8d2j3/NJECOwIPjZY0g1k2ZOOKer7wNyaeSSERAw==","signatures":[{"sig":"MEUCIQD9nL+MbNUGzjcAfSqmLAtUjIbpj5j610065rfkS46K6gIgYAfldYc0IXsT3gcDC5nKsJ8RBbn0L0p5wvlsVH8JiTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34402},"module":"./dist/alpine-tailwind-lightbox.esm.js","browser":"./dist/alpine-tailwind-lightbox.min.js","gitHead":"6f8c46bdb9da5f5c20951386f4003aae121eef99","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"repository":{"url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git","type":"git"},"_npmVersion":"10.5.0","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.3"},"_npmOperationalInternal":{"tmp":"tmp/alpine-tailwind-lightbox_1.0.0_1716322597412_0.21747213605519122","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"alpine-tailwind-lightbox","version":"1.0.1","keywords":["Alpine","Alpine JS","Lightbox"],"license":"MIT","_id":"alpine-tailwind-lightbox@1.0.1","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"dist":{"shasum":"91882a9c6e55b7bae584f8b368df288d48b75976","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.0.1.tgz","fileCount":10,"integrity":"sha512-+QrXKU+08cfjeNLLoB9YjhIG+w3lxvVGPJxPB//7fz2we3bgz6F2FstjMOGqB/iM5Di9Bov+VIzHTvX+V4ImGg==","signatures":[{"sig":"MEQCIGKE9uylS9+7HgwImDNDHa1lyI1VXrR9Yo2CZEN7OU99AiAeZYg74P8OG1j/q8jO+1gJu8oywcJLEm6Avn6gFNkJrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34494},"module":"./dist/alpine-tailwind-lightbox.esm.js","browser":"./dist/alpine-tailwind-lightbox.min.js","gitHead":"6f715c15a6739bc75465cdb89ef7019637e64cc8","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"repository":{"url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git","type":"git"},"_npmVersion":"10.5.0","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.3"},"_npmOperationalInternal":{"tmp":"tmp/alpine-tailwind-lightbox_1.0.1_1716324297649_0.9534104836526298","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"alpine-tailwind-lightbox","version":"1.0.2","keywords":["Alpine","Alpine JS","Lightbox"],"license":"MIT","_id":"alpine-tailwind-lightbox@1.0.2","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"dist":{"shasum":"d9bb198ef7a24918e4fa81b6128574fc829d5d5e","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.0.2.tgz","fileCount":10,"integrity":"sha512-fsD2C9df2Lg59VXDhV2JYxNc2BuweSXQvyFofT2lP7Bj0SZ6tnlC+e/RnmnDPoFeTz0tFBE3E42FvuXsPWaFNg==","signatures":[{"sig":"MEUCIF2W2JkZHFyV3HrRHb/q868KVhC/Mlr/H5IQeNQlpCnVAiEAmuqM6zODJtwEM9QXh34ONHApKZRLU1GTyqDDl/daSs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34467},"main":"./src/index.js","module":"./dist/alpine-tailwind-lightbox.esm.js","gitHead":"426bb8aa0d1348bdf0c4256accc78a5b6c8da5d3","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"repository":{"url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git","type":"git"},"_npmVersion":"10.7.0","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","directories":{},"_nodeVersion":"18.20.4","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.3"},"_npmOperationalInternal":{"tmp":"tmp/alpine-tailwind-lightbox_1.0.2_1728574399629_0.02115989789636652","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"alpine-tailwind-lightbox","version":"1.1.0","keywords":["Alpine","AlpineJS","Tailwind","Lightbox"],"license":"MIT","_id":"alpine-tailwind-lightbox@1.1.0","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"dist":{"shasum":"f80ecac925bb52e8b5ef6cb4bb5a2615ce12383a","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.1.0.tgz","fileCount":12,"integrity":"sha512-dO8C0nmjCCQVljWjV0CA2O55DyMqrAQ2FkpcXYCbtdc5mF/X61IhsRj2chA1Skuma4W1YiUZ903wcCUR3gOnDA==","signatures":[{"sig":"MEUCIDZEBAslolpZplI9IyPqoc/GyMI6iRdqoxyVlj7XsTiNAiEApSV0T4oHUXy+mgD04csEZ5NRV+i3ogauNwlt2SOaH7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48232},"main":"./src/index.js","module":"./dist/alpine-tailwind-lightbox.esm.js","gitHead":"1b402f435cc7a30e9af6f3907527dd400bf12600","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"repository":{"url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git","type":"git"},"_npmVersion":"10.7.0","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","directories":{},"_nodeVersion":"18.20.4","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.3"},"_npmOperationalInternal":{"tmp":"tmp/alpine-tailwind-lightbox_1.1.0_1729112983898_0.38074999079717986","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"alpine-tailwind-lightbox","version":"1.2.0","keywords":["Alpine","AlpineJS","Tailwind","Lightbox"],"license":"MIT","_id":"alpine-tailwind-lightbox@1.2.0","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"dist":{"shasum":"721c1146891565a278f0e2cde5334820d0c0ab53","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.2.0.tgz","fileCount":11,"integrity":"sha512-AOr/wKQfxHED7vFFPn81s0D5laOjn3LbGPlQ0cp5Z+ZXyxoTQ7QgtU7g1MwgUwnhOLycGfOfzxcu1T6JvtGg1g==","signatures":[{"sig":"MEUCIQD8UHeSWfN/E4k04mB4s8YyNWQ/3RUsIzezeeic2ApecAIgOpOnhT/jyVFaD0XhU+uDQoG1iz34IepZJzhAEXTXTkE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48583},"main":"./src/index.js","module":"./dist/alpine-tailwind-lightbox.esm.js","gitHead":"205ead4363aad81fbf5df978f5a412eb759014e7","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"repository":{"url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git","type":"git"},"_npmVersion":"10.9.0","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.21.3"},"_npmOperationalInternal":{"tmp":"tmp/alpine-tailwind-lightbox_1.2.0_1774265871664_0.2663339365294448","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"alpine-tailwind-lightbox","description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","keywords":["Alpine","AlpineJS","Tailwind","Lightbox"],"version":"1.3.0","repository":{"type":"git","url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git"},"license":"MIT","module":"./dist/alpine-tailwind-lightbox.esm.js","main":"./src/index.js","scripts":{"build":"node ./scripts/build.js"},"devDependencies":{"esbuild":"^0.21.3"},"_id":"alpine-tailwind-lightbox@1.3.0","gitHead":"25bd0db4c769318661bff51f82bde872645bc6da","bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-7VMQg8Trez1Fdk0LsIm4+oK35UtmtvPOmaiezecqp/OaXFDwbrUVO0wsR46jxtC61H756VUDpZ1zQcAV+ay8tw==","shasum":"bb4ceab8b6a4700c4df42c42a5f2994581dde2e3","tarball":"https://registry.npmjs.org/alpine-tailwind-lightbox/-/alpine-tailwind-lightbox-1.3.0.tgz","fileCount":11,"unpackedSize":50508,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBgOq/qlfo8XfmUAT2MMwVRdhVEtITgn1lMdY7zMEXYbAiANFUU84anYN/QbsSvAj8XfzmCEi7H7zevdhHAFIRSwgw=="}]},"_npmUser":{"name":"oli-laban","email":"olilaban@outlook.com"},"directories":{},"maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alpine-tailwind-lightbox_1.3.0_1776092706094_0.03641761666381815"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-21T20:16:37.412Z","modified":"2026-04-13T15:05:06.390Z","0.0.1":"2024-05-20T19:34:46.349Z","1.0.0":"2024-05-21T20:16:37.553Z","1.0.1":"2024-05-21T20:44:57.791Z","1.0.2":"2024-10-10T15:33:19.790Z","1.1.0":"2024-10-16T21:09:44.331Z","1.2.0":"2026-03-23T11:37:51.805Z","1.3.0":"2026-04-13T15:05:06.275Z"},"bugs":{"url":"https://github.com/oli-laban/alpine-tailwind-lightbox/issues"},"license":"MIT","homepage":"https://github.com/oli-laban/alpine-tailwind-lightbox","keywords":["Alpine","AlpineJS","Tailwind","Lightbox"],"repository":{"type":"git","url":"git+https://github.com/oli-laban/alpine-tailwind-lightbox.git"},"description":"A simple lightbox for AlpineJS and Tailwind CSS projects.","maintainers":[{"name":"oli-laban","email":"olilaban@outlook.com"}],"readme":"

\"Alpine

\n\n

\n\"Latest\n\"License\"\n

\n\nA simple lightbox for AlpineJS and Tailwind CSS projects.\n\n### Prerequisites\n\n* [AlpineJS](https://alpinejs.dev/essentials/installation) (3.x)\n* [AlpineJS Focus Plugin](https://alpinejs.dev/plugins/focus)\n* [Tailwind CSS](https://tailwindcss.com/docs/installation) (3.x, 4.x)\n\n### Table of Contents\n\n* [Installation](#installation)\n* [Demo](#demo)\n* [Usage](#usage)\n* [Config Object](#config-object)\n* [Magics](#magics)\n* [License](#license)\n\n## Installation\n\n#### CDN\n\n```html\n\n\n\n\n\n\n\n\n```\n\n#### Module\n\nInstall the package:\n\n```shell\nnpm install alpine-tailwind-lightbox\n```\n\nThen import and initialize the plugin:\n\n```js\nimport Alpine from 'alpinejs'\nimport focus from '@alpinejs/focus'\nimport lightbox from 'alpine-tailwind-lightbox'\n\nAlpine.plugin(focus)\nAlpine.plugin(lightbox)\n\nAlpine.start()\n```\n\n#### Styles\n\nMake sure Tailwind can pick up the CSS classes by adding the lightbox HTML to your CSS config:\n\n```css\n/* Relative path to node_modules */\n@source '../node_modules/alpine-tailwind-lightbox/src/template.html';\n```\n\nOr `tailwind.config.js` if you are using Tailwind 3.x:\n\n```js\nmodule.exports = {\n content: [\n // ...\n './node_modules/alpine-tailwind-lightbox/src/template.html',\n ],\n // ...\n}\n```\n## Demo\n\n[View Demo](https://oli-laban.github.io/alpine-tailwind-lightbox/)\n## Usage\n\nYou 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.\n\n```html\n\n Open Image\n\n```\n\n> 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.\n\nFor more options, you can pass an object to the lightbox (see the [Config Object](#config-object) reference):\n\n```html\n\n Open Image\n\n\n\n Open Video\n\n```\n\n#### Lightbox Groups\n\nBy 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:\n\n```html\n\n View the Cats\n\n\n\n View the Dogs\n\n```\n\n#### Lazy Loading Images\n\nBy 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):\n\n```html\n\n Open Image\n\n```\n\nFor smoother navigation between images, when an image is opened this will also load the previous and next image in the lightbox.\n\n#### Programmatic Creation\n\nIt is possible to create a lightbox without needing a DOM element per item. See [Magics](#magics).\n\n## Config Object\n\n| Option | Type | Default | Description |\n|--------------|----------------|--------|---------------------------------------------------------------------------------------------------------------------|\n| **url** | `string` | | The media URL. |\n| **type** | `string` | `image` | The media type. `image`, `video` or `embed`. |\n| **group** | `string\\|null` | `null` | The lightbox group the item should be added to. If omitted, the item is added to the default lightbox. |\n| **lazy** | `boolean` | `false` | Indicates whether to delay fetching the image until it is opened. Only applies to the `image` type. |\n| **muted** | `boolean` | `false` | Determines whether the video should be muted by default. Only applies to the `video` type. |\n| **autoplay** | `boolean` | `false` | Determines whether the video should play automatically upon opening the lightbox. Only applies to the `video` type. |\n\n## Magics\n\nThere are magic functions available for controlling lightboxes programmatically.\n\n### `$lightbox(items, group)`\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|----------------------|---------|---------------------------------------------------------------------------------------------|\n| **items** | `(string\\|object)[]` | | An array of URLs or config objects. |\n| **group** | `string\\|null` | `null` | The name of the lightbox group. If `null`, the items will be added to the default lightbox. |\n\n#### Example Usage\n\n```html\n\n```\n\n> If there are also lightbox items created via `x-lightbox` targeting the same group (default or named), the items will be merged.\n\n### `$lightbox.open(urlOrRef, group)`\n\n#### Parameters\n\n| Parameter | Type | Default | Description |\n|--------------|-----------------------------|---------|-------------------------------------------------------------------------------------------------------|\n| **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. |\n| **group** | `string\\|null` | `null` | The name of the lightbox group. If `null`, the default lightbox will be opened. |\n\n#### Example Usage\n\n```html\n\"Example\n\nOpen Image\nor\nOpen Image\n```\n\n## Global Options\n\n| Option | Type | Default | Description |\n|---------------|----------------|----|--------------------------------------------------------------------------------------------------------------------------|\n| **container** | `string\\|null` | `null` | A CSS selector for the element the lightbox should be appended to. If null, the lightbox will be appended to the `body`. |\n\nUsing global options differs depending on whether you are using the module or CDN build.\n\n#### Module\n\nUse the `.configure` method when registering the plugin:\n\n```js\nAlpine.plugin(lightbox.configure({ container: '#lightbox-container' }))\n```\n\n#### CDN\n\nDeclare a global variable in your HTML **before** the CDN script:\n\n```html\n\n```\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","readmeFilename":"README.md"}