All-in-One Modal Lightbox Solution For Web Developers – DimBox.js

Preview:

Description:

DimBox.js is a lightweight yet powerful and customizable JavaScript popup library for creating stunning modals & lightboxes on your website.

It supports a variety of content types, including images, galleries, HTML5/YouTube/Vimeo videos, iframe content, AJAX content, inline content, and much more.

How to use it:

1. Install and import the DimBox.js library.

# NPM
$ npm i dimbox

// ES Module
import dimbox from 'dimbox';

// Browser
<link rel="stylesheet" href="dist/css/dimbox.min.css" />
<script src="dist/js/dimbox.min.js"></script>

2. Create modal popups using the following HTML data attributes:

• data-dimbox: Required. All links having the same value will be shown in a gallery lightbox.
• data-dimbox-caption: Text to be displayed at the bottom of the modal.
• data-dimbox-ratio: 16×9, 4×3, 1×1 and 9×16.
• data-dimbox-type: image, video, iframe, inline and ajax.

<!-- Image Lightbox -->
<a href="1.jpg" data-dimbox="my-image" data-dimbox-caption="Image Description">
  Image
</a>
<!-- Video Lightbox -->
<a href="https://www.youtube.com/embed/j4a2uCvbfAc" data-dimbox="youtube" data-dimbox-ratio="16x9">
  YouTube Video
</a>
<a href="https://player.vimeo.com/video/43588364" data-dimbox="vimeo" data-dimbox-ratio="16x9">
  Vimeo Video
</a>
<a href="/path/to/1.mp4" data-dimbox="html5video">
  HTML5 Video
</a>
<!-- AJAX Modal -->
<a href="/path/to/endpoint/" data-dimbox="ajax" data-dimbox-type="ajax">
  Ajax Content
</a>
<!-- Iframe Modal -->
<a href="/path/to/url/" data-dimbox="iframe">
  iFrame Content
</a>
<!-- Inline Modal -->
<a href="#inlineContent" data-dimbox="inline">
  Inline Content
</a>
<div id="inlineContent" class="d-none">
  Make sure to hide the DIV on page load
</div>

3. Override the default configs.

dimbox.setConfig({
  // close the modal on click outside
  closeOnOverlayClick: true,
  // 16x9, 4x3, 1x1 and 9x16
  iframeRatio: '16x9',
  // default selector
  selector: 'a[data-dimbox]',
  // allows the user to download the media
  showDownloadButton: true,
  // custom icons
  svgCloseButton: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>',
  svgDownloadButton: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>',
  svgPrevNextButton: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>',
  // or light
  theme: 'dark',
  // video options
  videoAutoplay: true,
  videoControls: true,
  videoLoop: false,
  videoVolume: null,
  // XHR response type
  xhrResponseType: 'json',
  // custom templates
  ajaxTemplate: `
    <div class="dimbox-ajax-container">
      <div class="dimbox-ajax-content">{{content}}</div>
      <div class="dimbox-caption">{{caption}}</div>
    </div>
  `,
  imageTemplate: `
  <figure class="dimbox-figure">
    <img src="{{src}}" class="dimbox-image" alt="{{alt}}" />
    <figcaption class="dimbox-caption">{{caption}}</figcaption>
  </figure>`,
  iframeTemplate: `
  <div class="dimbox-iframe-container">
    <iframe src="{{src}}" class="dimbox-iframe"></iframe>
    <div class="dimbox-caption">{{caption}}</div>
  </div>
  `,
  inlineTemplate: `
  <div class="dimbox-inline-container">
    <div class="dimbox-inline-content">{{content}}</div>
    <div class="dimbox-caption">{{caption}}</div>
  </div>
  `,
  sequenceTemplate: '<span class="dimbox-sequence-current">{{current}}</span> / <span class="dimbox-sequence-total">{{total}}</span>',
  videoTemplate: `
  <div class="dimbox-video-container">
    <video src="{{src}}" class="dimbox-video"></video>
    <div class="dimbox-caption">{{caption}}</div>
  </div>
  `,
  // callbacks
  onAfterClose: null,
  onAfterInit: null,
  onAfterOpen: null,
  onAfterUpdateContent: null,
  onBeforeClose: null,
  onBeforeInit: null,
  onBeforeOpen: null,
  onBeforeUpdateContent: null,
  onContentLoaded: null,
  onDownload: null,
  onXhrComplete: null,
});

4. API methods.

// close
dimbox.close();
// go to the next item
dimbox.next();
// back to the previous item
dimbox.previous();
// open an element
var myAElement = document.getElementById('myAElement');
dimbox.open(myAElement);

Changelog:

v1.0.3 (09/11/2023)

• Add focus trapping when DimBox is open.