This lightbox has a new class! Instead of the default 'dbox' class this lightbox will only fire with the anchor class of new-anchor-class

<a class="new-anchor-class" href="img/640.png">
  <img sizes="(min-width: 530px) 25vw, 100vw"
       srcset="img/640-177w.png 177w,
         img/640-240w.png 240w,
         img/640-321w.png 321w,
         img/thumb/640-th.png 367w"
       src="img/thumb/640-th.png"
       alt="orange rectangle with the number 640 in the center"
       class="dialog-lightbox-image"
       width="100%"
  >
 </a>

We have to have initialize this new class and insert another dialog element into our page - or keep the original.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let newAnchorClass = new Dbox({
            element: '.new-anchor-class'
        });
        newAnchorClass.run();
    });
</script>

This example gives the dialog box at the end of our page a new ID. We'll need a separate dialog box for this from the above example.

<dialog id="new-dialog-id" 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>

We have to have initialize this new dialog box with the new ID we are calling.

<script>
  document.addEventListener("DOMContentLoaded", function () {
      let newDialogID = new Dbox({
        dialogBox: '#new-dialog-id'
      });
      newDialogID.run();
  });
</script>

This dialog lightbox will change the anchor class from the default, add a new ID to a new dialog element at the end of the page and make it a modal.

<dialog id="classModal" 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>

We have to have initialize this new dialog box with the new ID we are calling.

<script>
  document.addEventListener("DOMContentLoaded", function () {
     let classModal = new Dbox({
      element: '.newClassModal',
      modal: true,
      dialogBox: '#classModal'
    });
    classModal.run();
});
</script>