1. Installation & Setup
# Install via NPM
npm install @modracx/gallery-js
# Or include via CDN script tag
<script src="https://cdn.jsdelivr.net/npm/@modracx/gallery-js/dist/gallery.min.js"></script>
2. Markup Structure
<div class="gallery-container" id="product-gallery">
<a href="/images/photo1-hd.webp" data-caption="Enterprise Server Rack Architecture" data-thumb="/images/photo1-thumb.webp">
<img src="/images/photo1-preview.webp" alt="Server Rack" />
</a>
<a href="/images/photo2-hd.webp" data-caption="High-Availability Database Cluster" data-thumb="/images/photo2-thumb.webp">
<img src="/images/photo2-preview.webp" alt="Cluster Topology" />
</a>
</div>
import { Gallery } from '@modracx/gallery-js';
const gallery = new Gallery('#product-gallery', {
enableThumbnails: true,
enableSwipe: true,
loop: true,
zoomOnPinch: true,
transitionDuration: 280
});
3. Options & Configuration Matrix
| Option |
Type |
Default |
Description |
enableThumbnails |
boolean |
true |
Render horizontal bottom thumbnail strip |
enableSwipe |
boolean |
true |
Enable touch swipe gestures on mobile viewports |
loop |
boolean |
true |
Wrap seamlessly from the last image back to the first |
zoomOnPinch |
boolean |
true |
Support two-finger pinch-to-zoom on high-res photos |
transitionDuration |
number |
300 |
Slide animation duration in milliseconds |
4. Keyboard & Touch Accessibility
- ← / → : Navigate to previous / next media asset.
- Escape : Close lightbox modal and restore focus to trigger element.
- Space : Toggle slideshow autoplay mode.
- Vertical Swipe Down: Dismiss lightbox with natural momentum deceleration.
Related Tools & Documentation