Author: | rqrauhvmra |
---|---|
Views Total: | 80 views |
Official Page: | Go to website |
Last Update: | February 22, 2021 |
License: | MIT |
Preview:

Description:
Tobii is a feature-rich, responsive, accessible, mobile-friendly lightbox library that makes it possible to display any content type (HTML5/Youtube video, iframe content, inline HTML, and even image gallery) in a modal popup.
More Features:
- Image captions.
- Smart navigation controls.
- Item counter.
- Keyboard interactions.
- Image loading indicator.
- Swipe & click outside to close.
- Auto play videos.
How to use it:
1. To get started, include the Tobii library’s files on the page.
<link href="dist/css/tobii.css" rel="stylesheet" /> <script src="dist/js/tobii.js"></script>
2. Initialize the Tobii library and we’re ready to go.
var tobii = new Tobii();
3. Make an element to toggle a basic lightbox that loads content from an inline HTML element.
<button type="button" data-type="html" data-target="#modal" class="lightbox"> Toggle </button>
<div id="modal" class="modal"> <div class="modal__inner"> Modal Content Here </div> </div>
4. Embed an iframe into the lightbox.
<button type="button" data-type="iframe" data-target="https://example.jpg" class="lightbox"> Open Example.com </button>
5. Embed a Youtube video into the lightbox.
<button type="button" data-type="youtube" data-id="VIDEO ID HERE" class="lightbox"> Play Youtube Video </button>
6. Group your images using the data-group
attribute and display them as an inline slider in the lightbox.
<a href="1.jpg" class="lightbox" data-group="gallery"> <img src="1.jpg" alt="Alt" width="200"> </a> <a href="2.jpg" class="lightbox" data-group="gallery"> <img src="2.jpg" alt="Alt" width="200"> </a> <a href="3.jpg" class="lightbox" data-group="gallery"> <img src="3.jpg" alt="Alt" width="200"> </a>
7. Config the lightbox with the following options.
var tobii = new Tobii({ // default selector selector: '.lightbox', // shows image captions captions: true, captionsSelector: 'img', captionAttribute: 'alt', captionText: null, // returns the caption text for the current element // 'auto' = auto hides navigation controls on mobile devices nav: 'auto', // custom navigation controls navText: [ '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 18l-6-6 6-6"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 6l6 6-6 6"/></svg>' ], navLabel: [ 'Previous image', 'Next image' ], // shows close button close: true, closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12M6 18L18 6"/></svg>', closeLabel: 'Close lightbox', // image loading indicator loadingIndicatorLabel: 'Image loading', // shows image counter counter: true, // enables keyboard interactions keyboard: true, // shows a zoom image on the images zoom: true, zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 16v5h-5"/><path d="M8 21H3v-5"/><path d="M16 3h5v5"/><path d="M3 8V3h5"/></svg>', // click/tap outside to close the lightbox docClose: true, // allows to close the lightbox with swipe event swipeClose: true, // hides scrollbar when the lightbox is activated hideScrollbar: true, // enables drag and touch swipe events draggable: true, // touch and mouse dragging threshold in pixels threshold: 100, // auto plays videos autoplayVideo: false, // modal mode modal: false, // theme class theme: 'tobii--theme-default' });
8. API methods.
// open a specific item instance.open(index, callback); // goto the next item instance.next(callback); // back to the prev item instance.prev(callback); // close the lightbox instance.close(callback); // add a new item to the lightbox instance.add(element, callback); // remove an item instance.remove(element, callback); // check if is open instance.isOpen(); // get the current item index instance.currentSlide(); // select a specific group instance.selectGroup(); // get the current group instance.currentGroup(); // destroy the lightbox instance.destroy();
Changelog:
v0.2.6 (02/22/2021)
- Move to ES6
- Create extra module and UMD builds
- Add captionText config to set a callback for custom caption elements
- Add AVIF support
08/29/2020
- Add theme option/ class, improve small things