eleventy-plugin-img-magnifier
Version:
45 lines (28 loc) • 1.97 kB
Markdown
# eleventy-plugin-img-magnifier : zoom image to fullscreen
Enlarge images and create a lightbox to view fullscreen.
When hovering an img, the cursor is changed as a magnifying glass to indicates to the user that the img can be enlarged. A click and the img appears enlarged, through a fade-in animation and the background get darker. A click outside the image quit the enlarged view.
[showcase.webm](https://github.com/user-attachments/assets/ee2c8c07-c4d7-4fe6-8b32-40afb5419713)
]
You have nothing particular to do, the plugin automatically handle your existing images
## Installation
```bash
npm install eleventy-plugin-img-magnifier
```
Then register it in your config .eleventy.js file :
```js
import imgMagnifier from "eleventy-plugin-img-magnifier"
export default function(eleventyConfig) {
eleventyConfig.addPlugin(imgMagnifier)
}
```
Place the `{% imgmagnifier %}` shortcode on your desired pages/templates in the `<head>`of your HTML file
## How does it work ?
When the image is clicked, a js script loads and dynamically inserts a `<dialog>` HTML modal right before the image in its container. When the outside of the modal is clicked the `dialog` automatically disappears.
The overall is styled and transitioned via native CSS `@starting-style` rule and `<dialog>` targeting.
Now supporting :
- native light dismiss
- keyboard navigation (ESC to close)
## Progressive enhancement
New `<dialog>` `closedby="any"` attribute allows to light dismiss the element without any JS (was not possible on `<dialog>` until May 2025). Still keeping the JS function that allows legacy closing till [Baseline](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy#browser_compatibility).
## Requirements
It's based on ESM so Eleventy 3.0 minimum is required.