Tobii is a feature-rich, responsive, accessible, mobile-friendly lightbox library that makes it attainable to show any HTML5/Youtube video, iframe content material, inline HTML, and even a picture gallery in a modal popup.
Browser support
Tobii supports the following browser (all the latest versions):
- Chrome
- Firefox
- Internet Explorer 11
- Edge
- Safari
Features
- No dependencies
- Supports multiple content types:
- Images
- Inline HTML
- Iframes
- Videos (YouTube, Vimeo)
- Grouping
- Events
- Customizable with settings and CSS
- Accessible:
- ARIA roles
- Keyboard navigation:
Prev
/Next
Keys: Navigate through slidesESCAPE
Key: Close TobiiTAB
Key: Focus on elements within Tobii, not outside
- User preference media features:
prefers-reduced-motion
media query
- When Tobii opens, focus is set to the first focusable element in Tobii
- When Tobii closes, the focus returns to what was in focus before Tobii opened
- Touch & Mouse drag support:
- Drag/ Swipe horizontally to navigate through slides
- Drag/ Swipe vertically to close Tobii
- Responsive
Must Read: Responsive Accordion Image Photo Gallery In JavaScript
How to make use of it:
Install:
npm install @midzer/tobii --save
You can install Tobii by linking .css and .css files. js to your HTML file. The HTML code might look like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your page title</title> <!-- CSS --> <link href="tobii.min.css" rel="stylesheet"> </head> <body> <!-- Your HTML content --> <!-- JS --> <script src="tobii.min.js"></script> </body> </html>
Initialize the script by running:
const tobii = new Tobii()
media types
The standard way to use Tobii is to link a thumbnail image with the lightbox class name to a larger image:
<a href="path/to/image.jpg" class="lightbox"> <img src="path/to/thumbnail.jpg" alt="I am a caption"> </a>
HTML inline
For embedded HTML, create an element with a unique ID:
<div id="selector"> <!-- Your HTML content --> </div>
iframe
For an iframe, create a link using the lightbox for the class name:
<a href="https://www.wikipedia.org" data-type="iframe" class="lightbox"> Open Wikipedia </a>
Youtube
For a YouTube video, create a link using the lightbox for the category name and the data-id attribute with the ID of the YouTube video:
<a href="#" data-type="youtube" data-id="KU2sSZ_90PY" class="lightbox"> Open YouTube video </a>
Grouping
If you have a collection of related types that you would like to combine into a collection, add the dataset attribute:
<a href="path/to/image_1.jpg" class="lightbox" data-group="vacation"> <img src="path/to/thumbnail_1.jpg" alt="I am a caption"> </a> <a href="path/to/image_2.jpg" class="lightbox" data-group="vacation"> <img src="path/to/thumbnail_2.jpg" alt="I am a caption"> </a> // ... <a href="path/to/image_4.jpg" class="lightbox" data-group="birthday"> <img src="path/to/thumbnail_4.jpg" alt="I am a caption"> </a> // ...
Options
The following options are available:
Must Read: Create Dynamic, Easy-to-use Photo Gallery jQuery Plugin
Property | Type | Default | Description |
---|---|---|---|
selector | string | “.lightbox” | All elements with this class trigger Tobii. |
captions | bool | true | Display captions, if available. |
captionsSelector | “self”, “img” | “img” | Set the element where the caption is. Set it to “self” for the a tag itself. |
captionAttribute | string | “alt” | Get the caption from the given attribute. |
captionText | function | null | Custom callback which returns the caption text for the current element. The first argument of the callback is the element. If set, captionsSelector and captionAttribute are ignored. |
captionHTML | bool | false | Allow HTML captions. |
nav | bool, “auto” | “auto” | Display navigation buttons. “auto” hide buttons on touch-enabled devices. |
navText | string | [“inline svg”, “inline svg”] | Text or HTML for the navigation buttons. |
navLabel | string | [“Previous”, “Next”] | ARIA label for screen readers. |
close | bool | true | Display the close button. |
closeText | string | “inline svg” | Text or HTML for the close button. |
closeLabel | string | “Close” | ARIA label for screen readers. |
loadingIndicatorLabel | string | “Image loading” | ARIA label for screen readers. |
counter | bool | true | Display the current image index. |
keyboard | bool | true | Allow keyboard navigation. |
zoom | bool | true | Display zoom icon. |
zoomText | string | “inline svg” | Text or HTML for the zoom icon. |
docClose | bool | true | Click outside to close Tobii. |
swipeClose | bool | true | Swipe up to close Tobii. |
draggable | bool | true | Use dragging and touch swiping. |
threshold | number | 100 | Touch and mouse dragging threshold (in px). |
autoplayVideo | bool | false | Videos will automatically start playing as soon as they can do so without stopping to finish loading the data. |
autoplayAudio | bool | false | Audio will automatically start playing. |
Data attributes
The following options are available:
Must Read: Responsive Photo/Image Gallery in Pure JavaScript | Cube Gallery
Property | Description |
---|---|
data-type | Sets media type. Possible values: html ,iframe ,youtube . |
data-id | Required for youtube media type. |
data-target | Can be used to set targets for “iframe” and “html” types. |
data-group | Set custom group |
data-width | Set container width for the iframe or youtube types. |
data-height | Set container height for the iframe or youtube types. |
data-controls | Indicates whether the video player controls are displayed: 0 do not display and 1 display controls in the player. |
data-allow | Allows to set allow attribute on iframes. |
data-srcset | Allows to have Responsive image or retina images |
data-zoom | Allows to enable or disable zoom icon. Values: “true” or “false” |
API
Must Read: Picture Swipe Gallery With Thumbnails For Vue.js
Function | Description |
---|---|
open(index) | Open Tobii. Optional index (Integer), zero-based index of the slide to open. |
select(index) | Select a slide with index (Integer), zero-based index of the slide to select. |
previous() | Select the previous slide. |
next() | Select the next slide. |
selectGroup(value) | Select a group with value (string), name of the group to select. |
close() | Close Tobii. |
add(element) | Add element (DOM element). |
remove(element) | Remove element (DOM element). |
isOpen() | Check if Tobii is open. |
slidesIndex() | Return the current slide index. |
slidesCount() | Return the current number of slides. |
currentGroup() | Return the current group name. |
reset() | Reset Tobii. |
destroy() | Destroy Tobii. |
Events
Must Read: Simple, Stunning, Powerful Photo Album jQuery Plugin | Futurama
eventName | Description |
---|---|
open | Triggered after Tobii has been opened. |
close | Triggered after Tobii has been closed. |
previous | Triggered after the previous slide is selected. |
next | Triggered after the next slide is selected. |
See Demo And Download

Official Website(rqrauhvmra): Click Here
This superior jQuery/javascript plugin is developed by rqrauhvmra. For extra Advanced Usages, please go to the official website.