Dialog Lightbox Demo
Usage
In the head of you document insert the dbox.css file found in the dist/css directory followed by the JS file found in dist/js with the defer attribute.
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/dbox.css">
<script src="dist/js/dbox.min.js" defer></script>
</head>
Each image you wish to show in a light box needs to be wrapped in an anchor tag. The href of the anchor tag should point to the large image you wish to show
in the lightbox. For minimal configuration the anchor tag needs to have a class of dbox. Your image tag's alt text will be used as the "caption" in the
lightbox.
<a class="dbox" href="your/lightbox/image.jpg">
<img src="your/thumbnail/image.jpg"
alt="Your ALT Text Used for the lightbox caption"
class="dialog-lightbox-image"
width="100%" >
</a>
After your image is marked up you need to insert into your page the dialog markup. This markup should be at
the END of your page before the closing </body> tag.
<dialog id="js-dbox" class="dbox-dialog">
<div class="dbox-dialog--content">
<img src="" alt="" class="dbox-dialog--image">
<div class="dbox-dialog--container">
<p class="dbox-dialog--caption"></p>
<button type="button" class="dbox-dialog--close">close</button>
</div>
</div>
</dialog>Finally at the end of your document (or in your own js file) add in this snippet to initialize the lightbox.
<script>
document.addEventListener("DOMContentLoaded", function() {
let lightbox = new Dbox();
lightbox.run();
});
</script>Customization
Changing the anchor class or ID
To change from the default class of dbox add your class or ID to the
constructor at the end.
<script>
document.addEventListener("DOMContentLoaded", function() {
let lightbox = new Dbox({
element: '.new-class'
// using an id instead of class
element: '#new-id'
});
lightbox.run();
});
</script>Changing the dialog ID or class
<script>
document.addEventListener("DOMContentLoaded", function() {
let lightbox = new Dbox({
dialogBox: '#new-dialog-id'
// or a class
dialogBox: '.new-dialog-class'
});
lightbox.run();
});
</script>Display The Image as a Modal
Activating this will only let the image be closed by hitting the "close" button.
<script>
document.addEventListener("DOMContentLoaded", function() {
let lightbox = new Dbox({
modal: true
});
lightbox.run();
});
</script>Browser Support
Internet Explorer 11 and all other Evergreen "Modern" browsers - Edge, Chrome, Firefox, Safari, Opera, Brave. This is because a dialog polyfill is used for browsers that don't support the dialog element