lity

Lity is a lightweight lightbox library for web pages. It provides a modal overlay that presents images, videos, iframes, and inline content without navigating away from the page. It is designed to be simple to integrate and to work with minimal setup.

How it works: To trigger a lightbox, a data-lity attribute is added to a link or element. The library then loads the destination content into a centered modal with a backdrop. It supports various content types by loading the linked resource into the modal, including images, HTML fragments, or external pages via iframes. It emphasizes accessibility and responsive behavior and provides keyboard controls such as Escape to close.

Installation and usage: Include the lity CSS and JavaScript files in the page. A typical usage is an anchor tag like: <a href="image.jpg" data-lity>Open image</a>. For inline content, place the content in a hidden element and link to it with a reference like href="#inline-content" and data-lity. Lity is suitable for static sites, blogs, and CMS templates that need a consistent lightbox experience.

Development and licensing: Lity is an open-source project hosted on platforms such as GitHub. It is designed to be minimal in footprint and free of heavy dependencies, offering a straightforward solution for displaying various content types in a modal overlay.