Responsive Video, Iframe, Photo Gallery & Inline Content Lightbox Library

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 slides
  - ESCAPE Key: Close Tobii
  - TAB 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.