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

![A user clicks on a blog image, the image appears fullscreen on a darker background in a fade-in animation, the user clicks outside and the image disappear]

You have nothing particular to do, the plugin automatically handle your existing images

Installation

npm install eleventy-plugin-img-magnifier

Then register it in your config .eleventy.js file :

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.

Requirements

It's based on ESM so Eleventy 3.0 minimum is required.

Package detail