{"_id":"@benbjurstrom/alpinejs-zoomable","_rev":"5-1d1cf6b96aaaa6014bbf100762975c5f","name":"@benbjurstrom/alpinejs-zoomable","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@benbjurstrom/alpinejs-zoomable","version":"0.1.0","author":{"name":"Ben Bjurstrom"},"license":"MIT","_id":"@benbjurstrom/alpinejs-zoomable@0.1.0","maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"dist":{"shasum":"6e04c72452c909c1a3eacb6b4b020300e4cc9122","tarball":"https://registry.npmjs.org/@benbjurstrom/alpinejs-zoomable/-/alpinejs-zoomable-0.1.0.tgz","fileCount":11,"integrity":"sha512-82piHrx83kxHTIMW/aXFdgPykRCuLEk6KHANWj/XfQrAGbWKTS9r4qyxDBePR0u2DV/fmExdwZmltX+PH4+hRg==","signatures":[{"sig":"MEQCIG0pNp/vtyP/aK8RJiDvvxGg23eQ5y4f/WWcTIataG7UAiAaba/Vk0AenWyPkmIMGqzkGeij1EKhHdZsf8xKf4yiRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46303},"main":"dist/module.cjs.js","_from":"file:benbjurstrom-alpinejs-zoomable-0.1.0.tgz","unpkg":"dist/cdn.min.js","module":"dist/module.esm.js","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"},"_resolved":"/private/var/folders/g4/s9j_xkp575j9pjjyjpjxy77h0000gn/T/db64ed29f506d0e2d7e50b0ca2a10e1b/benbjurstrom-alpinejs-zoomable-0.1.0.tgz","_integrity":"sha512-82piHrx83kxHTIMW/aXFdgPykRCuLEk6KHANWj/XfQrAGbWKTS9r4qyxDBePR0u2DV/fmExdwZmltX+PH4+hRg==","repository":{"url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git","type":"git"},"_npmVersion":"10.9.0","description":"Fullscreen image viewer (lightbox) for Alpine.js.","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"~0.16.17"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-zoomable_0.1.0_1734798580812_0.6581958465549691","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@benbjurstrom/alpinejs-zoomable","version":"0.2.0","author":{"name":"Ben Bjurstrom"},"license":"MIT","_id":"@benbjurstrom/alpinejs-zoomable@0.2.0","maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"dist":{"shasum":"389bc94469dcafe8394702747d3a09ead7d29a4e","tarball":"https://registry.npmjs.org/@benbjurstrom/alpinejs-zoomable/-/alpinejs-zoomable-0.2.0.tgz","fileCount":11,"integrity":"sha512-dle+jBgrWuaH/DSs+Cs5/C4O1p2A40uIslGP64OPNx/MflDpE0d+N4b+nRK69nzYK9y0DhjxoC6rCy7qMwnIYg==","signatures":[{"sig":"MEUCIQC7P8Y716YTze6FW1/Umrm2TFY69ySmUmhFwVvQeOL+OwIgVohlAwkD/0xodrCi0nM47mcdclLKgYHI2mj5JLdoUVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48471},"main":"dist/module.cjs.js","_from":"file:benbjurstrom-alpinejs-zoomable-0.2.0.tgz","unpkg":"dist/cdn.min.js","module":"dist/module.esm.js","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"},"_resolved":"/private/var/folders/g4/s9j_xkp575j9pjjyjpjxy77h0000gn/T/06b57d76e025c28a517ddc781ba5345e/benbjurstrom-alpinejs-zoomable-0.2.0.tgz","_integrity":"sha512-dle+jBgrWuaH/DSs+Cs5/C4O1p2A40uIslGP64OPNx/MflDpE0d+N4b+nRK69nzYK9y0DhjxoC6rCy7qMwnIYg==","repository":{"url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git","type":"git"},"_npmVersion":"10.9.0","description":"Fullscreen image viewer (lightbox) for Alpine.js.","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"~0.16.17"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-zoomable_0.2.0_1734985240590_0.27989264826506965","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@benbjurstrom/alpinejs-zoomable","version":"0.3.0","author":{"name":"Ben Bjurstrom"},"license":"MIT","_id":"@benbjurstrom/alpinejs-zoomable@0.3.0","maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"dist":{"shasum":"0b8c44861d903cf55e5279c0c64dd729e3b08f63","tarball":"https://registry.npmjs.org/@benbjurstrom/alpinejs-zoomable/-/alpinejs-zoomable-0.3.0.tgz","fileCount":13,"integrity":"sha512-GoP8nm141uMzQ7w+qOirKEy63kto49mPdNTYS1ANGL/nyNxMEC56XZ7muW/Ivvnd2O6XgCQ13peM1ztJ0d4MJA==","signatures":[{"sig":"MEUCIHFQ7QbFMEDtrvXFw0J1Tmq0MC2VKh9RpoQHBvQSHeyAAiEAue4cnBO4zQqmPLO1mr6lwen/lRQpnjyK9kww1FjVyFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47975},"main":"dist/module.cjs.js","_from":"file:benbjurstrom-alpinejs-zoomable-0.3.0.tgz","unpkg":"dist/cdn.min.js","module":"dist/module.esm.js","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"},"_resolved":"/private/var/folders/g4/s9j_xkp575j9pjjyjpjxy77h0000gn/T/3856a3ced3c70963144e5e7c2b07b54e/benbjurstrom-alpinejs-zoomable-0.3.0.tgz","_integrity":"sha512-GoP8nm141uMzQ7w+qOirKEy63kto49mPdNTYS1ANGL/nyNxMEC56XZ7muW/Ivvnd2O6XgCQ13peM1ztJ0d4MJA==","repository":{"url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git","type":"git"},"_npmVersion":"10.9.0","description":"Fullscreen image viewer (lightbox) for Alpine.js.","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"~0.16.17","prettier":"3.4.2"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-zoomable_0.3.0_1734985534099_0.015578108717713812","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@benbjurstrom/alpinejs-zoomable","version":"0.4.0","author":{"name":"Ben Bjurstrom"},"license":"MIT","_id":"@benbjurstrom/alpinejs-zoomable@0.4.0","maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"dist":{"shasum":"7a33598b352b0c506461b6dd40b11059f0785bc7","tarball":"https://registry.npmjs.org/@benbjurstrom/alpinejs-zoomable/-/alpinejs-zoomable-0.4.0.tgz","fileCount":13,"integrity":"sha512-YxirHK2okneUdm0taDYt4xT9VC4iF4P3G+n34OfjMHlZUqJ7j7bgHwUj8xot4fQREyuwLLocWX6Z+yEv240hdg==","signatures":[{"sig":"MEUCIQDEpqWh4+JcQtjjVr8KFJFnYW85o2b2e2P6Vi8VIyixeAIgQkiuQ9dL2RZI3AYF2LWSt7s1JR01M0+oEvAxewhus68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54006},"main":"dist/module.cjs.js","_from":"file:benbjurstrom-alpinejs-zoomable-0.4.0.tgz","unpkg":"dist/cdn.min.js","module":"dist/module.esm.js","scripts":{"build":"node ./scripts/build.js"},"_npmUser":{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"},"_resolved":"/private/var/folders/g4/s9j_xkp575j9pjjyjpjxy77h0000gn/T/6e568304ea4a7ddd0f4040e8190e61a8/benbjurstrom-alpinejs-zoomable-0.4.0.tgz","_integrity":"sha512-YxirHK2okneUdm0taDYt4xT9VC4iF4P3G+n34OfjMHlZUqJ7j7bgHwUj8xot4fQREyuwLLocWX6Z+yEv240hdg==","repository":{"url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git","type":"git"},"_npmVersion":"10.9.0","description":"Fullscreen image viewer (lightbox) for Alpine.js.","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"~0.16.17","prettier":"3.4.2"},"_npmOperationalInternal":{"tmp":"tmp/alpinejs-zoomable_0.4.0_1734986028434_0.14720272561548375","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@benbjurstrom/alpinejs-zoomable","version":"0.5.0","description":"Fullscreen image viewer (lightbox) for Alpine.js.","homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","repository":{"type":"git","url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git"},"author":{"name":"Ben Bjurstrom"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","unpkg":"dist/cdn.min.js","devDependencies":{"esbuild":"~0.16.17","prettier":"3.4.2"},"scripts":{"build":"node ./scripts/build.js"},"_id":"@benbjurstrom/alpinejs-zoomable@0.5.0","bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"_integrity":"sha512-nUj9fazr+1uphCswH7fi6U+ZlFWsAFi1VraHtw48mAmIWuwx9ZclLrb54h990frp9eP/R9jQHQhdO0gdGOVogQ==","_resolved":"/private/var/folders/g4/s9j_xkp575j9pjjyjpjxy77h0000gn/T/4b6e18a4dff722496f15bb0fea35c690/benbjurstrom-alpinejs-zoomable-0.5.0.tgz","_from":"file:benbjurstrom-alpinejs-zoomable-0.5.0.tgz","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-nUj9fazr+1uphCswH7fi6U+ZlFWsAFi1VraHtw48mAmIWuwx9ZclLrb54h990frp9eP/R9jQHQhdO0gdGOVogQ==","shasum":"5f13f828a9024e385c28d188653ff9773de2551a","tarball":"https://registry.npmjs.org/@benbjurstrom/alpinejs-zoomable/-/alpinejs-zoomable-0.5.0.tgz","fileCount":13,"unpackedSize":53894,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGtqGFS9vKaH3VjJIwir427WSyi0zOxEFw7AJr/gKIHfAiEAjI0LieEMsi83d7mHil/xBq3W6kpm+kmE99pZ2UTXvcY="}]},"_npmUser":{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"},"directories":{},"maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alpinejs-zoomable_0.5.0_1742831772626_0.443564625632092"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-21T16:29:40.685Z","modified":"2025-03-24T15:56:12.979Z","0.1.0":"2024-12-21T16:29:40.971Z","0.2.0":"2024-12-23T20:20:40.840Z","0.3.0":"2024-12-23T20:25:34.303Z","0.4.0":"2024-12-23T20:33:48.610Z","0.5.0":"2025-03-24T15:56:12.805Z"},"bugs":{"url":"https://github.com/benbjurstrom/alpinejs-zoomable/issues"},"author":{"name":"Ben Bjurstrom"},"license":"MIT","homepage":"https://github.com/benbjurstrom/alpinejs-zoomable","repository":{"type":"git","url":"git+https://github.com/benbjurstrom/alpinejs-zoomable.git"},"description":"Fullscreen image viewer (lightbox) for Alpine.js.","maintainers":[{"name":"benbjurstrom","email":"benbjurstrom@gmail.com"}],"readme":"![zoomable](https://github.com/user-attachments/assets/eda8c6b2-03ee-4a28-bc5f-262540863f3e)\n\n# @benbjurstrom/alpinejs-zoomable\n\nA fullscreen image viewer (lightbox) for Alpine.js, which offers modern accessibility features.\n\n## Installation\n\n### Via NPM\n```bash\nnpm install @benbjurstrom/alpinejs-zoomable\n```\n\nThen initialize it inside your bundle:\n\n```javascript\nimport Alpine from 'alpinejs'\nimport Zoomable from '@benbjurstrom/alpinejs-zoomable'\n\n// Attach the plugin\nAlpine.plugin(Zoomable)\n\nAlpine.start()\n```\n\n### Via CDN\n\nAdd the following script tag BEFORE your Alpine.js core script:\n\n```html\n<!-- Zoomable Plugin (example version) -->\n<script defer src=\"https://unpkg.com/@benbjurstrom/alpinejs-zoomable@0.4.0/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js\"></script>\n```\n\n## Usage\n\n1. Ensure you have an Alpine component scope somewhere in your DOM (e.g., a parent element with `x-data`).  \n2. Add the `x-zoomable` directive to any <img> element that you wish to enlarge on click.\n\nExample:\n```html\n<div x-data>\n  <img x-zoomable src=\"example.jpg\" alt=\"A scenic vista\" />\n</div>\n```\n\nWhen the image is clicked, a fullscreen view will open, allowing zooming and dragging. Pressing the Escape key, clicking outside the image, or pressing the close button will exit the fullscreen view.\n\n## Custom CSS\n\nTo allow for maxiumum customization this plugin does not include any styles. Below is an example CSS snippet you can include in your project to ensure a pleasant fullscreen experience. Feel free to customize as needed:\n\n```css\n<style>\n    img[x-zoomable]:hover {\n        cursor: zoom-in;\n    }\n\n    .zoomable-fullscreen-container {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100vh;\n        background: rgba(255,255,255, 0.9);\n        display: none;\n        z-index: 998;\n        cursor: zoom-out;\n        overflow: hidden;\n        touch-action: none;\n    }\n\n    .zoomable-fullscreen-image {\n        position: absolute;\n        max-height: none;\n        max-width: none;\n        cursor: grab;\n        transition: transform 0.2s ease-out;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        touch-action: none;\n        -webkit-user-select: none;\n        user-select: none;\n    }\n\n    .zoomable-fullscreen-image.dragging {\n        cursor: grabbing;\n        transition: none;\n    }\n\n    .zoomable-controls-panel {\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        display: flex;\n        gap: 10px;\n        z-index: 999;\n    }\n\n    .zoomable-control-button {\n        background: #a1a1aa;\n        border: none;\n        color: white;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background-color 0.2s;\n    }\n\n    .zoomable-control-button > svg {\n        width: 20px;\n        height: 20px;\n    }\n\n    .zoomable-control-button:hover,\n    .zoomable-control-button:focus {\n        background: #71717a;\n        outline: none;\n    }\n\n    @media (max-width: 768px) {\n        .zoomable-controls-panel {\n            top: 10px;\n            right: 10px;\n        }\n\n        .zoomable-control-button {\n            width: 44px;\n            height: 44px;\n            -webkit-tap-highlight-color: transparent; /* Prevents gray flash on iOS */\n            touch-action: manipulation; /* Optimize for touch */\n        }\n    }\n\n    .zoomable-loading-indicator {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 1000;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: #737373;\n        font-size: 1rem;\n    }\n\n    .zoomable-spinner {\n        width: 40px;\n        height: 40px;\n        border: 4px solid rgba(255, 255, 255, 0.3);\n        border-top: 4px solid #737373;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin-bottom: 10px;\n    }\n\n    @keyframes spin {\n        to { transform: rotate(360deg); }\n    }\n\n    .zoomable-loading-indicator[hidden] {\n        display: none;\n    }\n</style>\n```\n\nAdd the above CSS to your <head> or your app.css file.\n","readmeFilename":"README.md"}