Overview
This resource provides a lightweight, zero-dependency script to build a high-performance Masonry Gallery. It features automatic column calculation, lazy loading (blur-up effect), and a premium lightbox with touch support and hardware-accelerated animations.
Key Features
- Automatic Grid: Detects images within
<article>or.prosetags and re-wraps them. - Performance: Uses
IntersectionObserverfor lazy loading to keep your initial page load fast. - Glassmorphism UI: A high-end lightbox with backdrop-filters and animated gradient backgrounds.
- Responsive: Automatically scales from 2 columns on mobile to 8 columns on ultra-wide screens.
Quick Start
To use this in any HTML project, simply include the script tag before the closing </body> tag.
<script src="https://shyamcharan.pages.dev/cdn/js/masnory.js"></script>
How it Works
- Injection: The script injects its own CSS into the
<head>, so you don't need a separate stylesheet. - Targeting: It looks for images inside an
articleor a div with the class.prose. - Transformation: It replaces the parent container of your images with a
.auto-masonrygrid. - Lightbox: When an image is clicked, it initializes a fixed-position lightbox with keyboard (Arrows/Esc) and swipe support.
Customization
If you want to change the colors of the lightbox background, you can override the CSS variables in your own stylesheet:
:root {
--glass-bg: rgba(255, 255, 255, 0.1); /* Light mode glass */
--glass-border: rgba(255, 255, 255, 0.2);
}