img-popout Web Component

img-popout is a web component for letting users zoom in on a small image to see more details! Clicking on the image gives the user a full-screen dialog view.

Actually this website uses the web component basically everywhere. You can see it in action just by zooming in on the gallery image!

Features of this component include:

• Generic: It is designed to be useable on any website
• Customizable: Colors and animations can be tailored to fit the parent site's experience
• Accessible: Can be operated entirely with keyboards and screen readers

This is my first attempt at converting a web utility into something generic enough that it could be used by others. Web components make that easy, since they are a standard with support across basically all our beloved frameworks (except React, because why not...).