It allows you to switch between images via prev/next controls while providing a responsive, accessible viewing experience.
Features:
- Core Lightbox: Displays images in a fullscreen overlay.
- Navigation: Previous/Next buttons, plus options for clicking image sides.
- Captions: Automatically pulls from
altattributes (can be disabled). - Loading Indicator: Shows activity while large images load.
- No Dependencies: Pure vanilla JavaScript. No jQuery required.
- Minimal Assets: Doesn’t require external images, icon fonts, or font files.
- Accessibility: Screenreader-friendly, keyboard navigable (Arrows, Escape), focus management.
- Responsive: Adapts to different screen sizes; large images scale down.
- Click Behaviors: Optional close-on-overlay-click, optional nav-on-image-click.
- Customizable: Plenty of options to tweak behavior and appearance.
- Looping: Option to loop navigation from last to first image and vice-versa.
See it in action:
How to use it:
1. Load the Robroy Lightbox’s JavaScript and CSS files:
<link href="/dist/robroy.min.css" rel="stylesheet"> <script src="/dist/robroy.min.js"></script>
2. Add the data-robroy attribute to the anchor (<a>) tags wrapping your images. The href attribute of the anchor should point to the full-size image you want to display in the lightbox. The <img> tag inside can be a thumbnail.
<a href="full.jpg" data-robroy>
<img src="thumbnail.jpg" height="180" width="120" />
</a>
<a href="image.jpg" data-robroy data-robroy-height="1000" data-robroy-width="667">
<img src="thumbnail.jpg" height="180" width="120" alt="Custom Height/Width" />
</a>
<a href="full.jpg" data-robroy data-robroy-caption="Image Caption">
<img src="thumbnail.jpg" height="180" width="120" />
</a>
<a href="image.jpg" data-robroy>
<figure>
<img src="thumbnail.jpg" height="180" width="120" />
<figcaption>Use Figure Element</figcaption>
</figure>
</a>
<figure>
<a href="image.jpg" data-robroy>
<img src="thumbnail.jpg" height="180" width="120" />
</a>
<figcaption>Use Figure Element</figcaption>
</figure>
3. Call the window.robroy() function. You can pass an options object to customize its behavior.
window.robroy({
// options here
});
4. Available options to customize the lightbox gallery:
selector: '[data-robroy]': CSS selector for triggering elements.bodyClass: 'robroy-open': Class added to<body>when active.id: 'robroy': ID attribute for the lightbox<dialog>element.disableKeyPressListener: false: Ignore Escape/Arrow keys iftrue.disableResizeListener: false: Stop lightbox reacting to window resize iftrue.resizeDebounceMilliseconds: 100: Debounce interval for resize handler.minScreenWidth: 400: Minimum screen width (pixels) to activate lightbox.falsedisables this check. I’ve found this useful for touch devices where native image viewing might be preferred on small screens.disableImageClickListener: false: Prevent prev/next on image click iftrue.imageClickListenerThreshold: 0.5: Click area (0 to 0.5) on left/right of image for navigation.disableOverlayClickListener: false: Prevent close on overlay click iftrue.hideCloseButton: false: Hide the ‘X’ button iftrue.hideFullScreenButton: false: Hide the fullscreen toggle button iftrue.hideNavButtons: false: Hide Prev/Next buttons iftrue.hideCaption: false: Hide the caption area iftrue.hideOverlay: false: Hide the dark background overlay iftrue.disableAltCaptions: false: Don’t use<img>alt text as captions iftrue.imgLoadIntervalMilliseconds: 250: Check interval for image loading status.animateInClass: 'robroy-fade-in': CSS class for fade-in animation.animateOutClass: 'robroy-fade-out': CSS class for fade-out animation.enableLoop: false: Allow looping from last to first image and vice-versa iftrue.showNumber: false: Display “Image x of y” counter iftrue.
window.robroy({
selector: '[data-robroy]',
bodyClass: 'robroy-open',
id: 'robroy',
disableKeyPressListener: false,
disableResizeListener: false,
resizeDebounceMilliseconds: 100,
minScreenWidth: 400,
disableImageClickListener: false,
imageClickListenerThreshold: 0.5,
disableOverlayClickListener: false,
hideCloseButton: false,
hideFullScreenButton: false,
hideNavButtons: false,
hideCaption: false,
hideOverlay: false,
disableAltCaptions: false,
imgLoadIntervalMilliseconds: 250,
animateInClass: 'robroy-fade-in',
animateOutClass: 'robroy-fade-out',
enableLoop: false,
showNumber: false,
});
FAQs
Q: How do I create separate galleries on the same page?
A: The default data-robroy attribute groups all matched elements. To separate them, use different selectors. For example, add data-robroy="gallery1" to one set of links and data-robroy="gallery2" to another. Then, initialize Robroy twice: window.robroy({ selector: '[data-robroy="gallery1"]' }); window.robroy({ selector: '[data-robroy="gallery2"]' });
Q: Can I customize the appearance beyond the provided options?
A: Absolutely. The robroy.min.css file provides the base styling. You can override these styles in your own CSS file. Use your browser’s developer tools to inspect the elements (the lightbox container usually has the ID robroy by default) and target them with more specific CSS rules.
The post Accessible Gallery Lightbox with Vanilla JS – Robroy appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.
