It allows you to switch between images via prev/next controls while providing a responsive, accessible viewing experience.
alt attributes (can be disabled).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 if true.disableResizeListener: false: Stop lightbox reacting to window resize if true.resizeDebounceMilliseconds: 100: Debounce interval for resize handler.minScreenWidth: 400: Minimum screen width (pixels) to activate lightbox. false disables 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 if true.imageClickListenerThreshold: 0.5: Click area (0 to 0.5) on left/right of image for navigation.disableOverlayClickListener: false: Prevent close on overlay click if true.hideCloseButton: false: Hide the ‘X’ button if true.hideFullScreenButton: false: Hide the fullscreen toggle button if true.hideNavButtons: false: Hide Prev/Next buttons if true.hideCaption: false: Hide the caption area if true.hideOverlay: false: Hide the dark background overlay if true.disableAltCaptions: false: Don’t use <img> alt text as captions if true.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 if true.showNumber: false: Display “Image x of y” counter if true.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,
}); 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.
The first full trailer for Spider-Man: Brand New Day will be released tomorrow — but…
Sarah Michelle Gellar has discussed the shock cancellation of her Buffy the Vampire Slayer reboot…
Saudi Arabia now owns 10% of Capcom, after Saudi Crown Prince Mohammed Bin Salman's Electronic…
The post Wired’s New Editor Doesn’t Care If The Tech Bros Are Mad appeared first…
The post 2026 NAB Show Offering Free Show Floor Passes To Creators appeared first on…
Today, Spectrum launched its new Multiview feature in the Spectrum TV App, giving customers the ability to…
This website uses cookies.