Author: | hphaavikko |
---|---|
Views Total: | 72 views |
Official Page: | Go to website |
Last Update: | September 11, 2023 |
License: | MIT |
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.