!zoomable

@benbjurstrom/alpinejs-zoomable

A fullscreen image viewer (lightbox) for Alpine.js, which offers modern accessibility features.

Installation

$3

``bash
npm install @benbjurstrom/alpinejs-zoomable
`

Then initialize it inside your bundle:

`javascript
import Alpine from 'alpinejs'
import Zoomable from '@benbjurstrom/alpinejs-zoomable'

// Attach the plugin
Alpine.plugin(Zoomable)

Alpine.start()
`

$3

Add the following script tag BEFORE your Alpine.js core script:

`html





`

Usage

1. Ensure you have an Alpine component scope somewhere in your DOM (e.g., a parent element with x-data).
2. Add the x-zoomable directive to any element that you wish to enlarge on click.

Example:
`html



`

When 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.

Custom CSS

To 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:

`css

``

Add the above CSS to your or your app.css file.