The img-zoom Element

The img-zoom element represents an image that can be enlarged to fill the screen on demand.

<img-zoom>
   <img
      src="fruit.png"
      alt="Apples and such arranged on a table."
      width="1920"
      height="1470"
   />
</img-zoom>

Installation

You can import through CDN:

<script type="module" src="https://unpkg.com/@auroratide/img-zoom/lib/define.js"></script>

Or, you may install through NPM and include it as part of your build process:

$ npm i @auroratide/img-zoom

import '@auroratide/img-zoom/lib/define.js'

Usage

img-zoom is an inline markup element that you can use in your HTML document. It must have exactly one child which is either an img element or a picture element with a fallback img defined.

Using img:

<img-zoom>
   <img src="fruit.png" alt="Apples and such arranged on a table." width="1920" height="1470" />
</img-zoom>

Using picture:

<img-zoom>
   <picture>
      <source srcset="fruit.webp" type="image/webp" />
      <img src="fruit.png" alt="Apples and such arranged on a table." width="1920" height="1470" />
   </picture>
</img-zoom>

This demo uses the picture element.

Disabling Interaction

The disabled attribute disables zoom interaction. Not super sure if this is useful, but the feature's there just in case.

<img-zoom disabled>
   <img src="fruit.png" alt="" />
</img-zoom>

Customization

Since it's Just HTML^TM, you can use good ol' CSS.

img-zoom {
	box-shadow: 0 0 0.5em 0.5em oklch(0% 0 0 / 0.33);
}

Accessibility

This custom element is built with accessibility in mind! It treats the zoomed image like a dialog.

• Keyboard operation
  • When the image has focus, Enter will open the zoomed image.
  • When opened, focus is automatically placed on a Close button that will close the zoomed image.
  • Escape will also exit the zoomed image.
• Tab trapping: While zoomed, the tabbing order will remain within the image until dismissed.
• Reduced Motion: The animation is simplified for people who prefer reduced motion.