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

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:
      • PrevNext 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

PropertyTypeDefaultDescription
selectorstring“.lightbox”All elements with this class trigger Tobii.
captionsbooltrueDisplay captions, if available.
captionsSelector“self”, “img”“img”Set the element where the caption is. Set it to “self” for the a tag itself.
captionAttributestring“alt”Get the caption from the given attribute.
captionTextfunctionnullCustom 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.
captionHTMLboolfalseAllow HTML captions.
navbool, “auto”“auto”Display navigation buttons. “auto” hide buttons on touch-enabled devices.
navTextstring[“inline svg”, “inline svg”]Text or HTML for the navigation buttons.
navLabelstring[“Previous”, “Next”]ARIA label for screen readers.
closebooltrueDisplay the close button.
closeTextstring“inline svg”Text or HTML for the close button.
closeLabelstring“Close”ARIA label for screen readers.
loadingIndicatorLabelstring“Image loading”ARIA label for screen readers.
counterbooltrueDisplay the current image index.
keyboardbooltrueAllow keyboard navigation.
zoombooltrueDisplay zoom icon.
zoomTextstring“inline svg”Text or HTML for the zoom icon.
docClosebooltrueClick outside to close Tobii.
swipeClosebooltrueSwipe up to close Tobii.
draggablebooltrueUse dragging and touch swiping.
thresholdnumber100Touch and mouse dragging threshold (in px).
autoplayVideoboolfalseVideos will automatically start playing as soon as they can do so without stopping to finish loading the data.
autoplayAudioboolfalseAudio will automatically start playing.

Data attributes

The following options are available:

Must Read: Responsive Photo/Image Gallery in Pure JavaScript | Cube Gallery

PropertyDescription
data-typeSets media type. Possible values: html,iframe,youtube.
data-idRequired for youtube media type.
data-targetCan be used to set targets for “iframe” and “html” types.
data-groupSet custom group
data-widthSet container width for the iframe or youtube types.
data-heightSet container height for the iframe or youtube types.
data-controlsIndicates whether the video player controls are displayed: 0 do not display and 1 display controls in the player.
data-allowAllows to set allow attribute on iframes.
data-srcsetAllows to have Responsive image or retina images
data-zoomAllows to enable or disable zoom icon. Values: “true” or “false”

API

Must Read: Picture Swipe Gallery With Thumbnails For Vue.js

FunctionDescription
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

eventNameDescription
openTriggered after Tobii has been opened.
closeTriggered after Tobii has been closed.
previousTriggered after the previous slide is selected.
nextTriggered after the next slide is selected.

See Demo And Download

lightbox-Popup-gallery

Official Website(rqrauhvmra): Click Here

This superior jQuery/javascript plugin is developed by rqrauhvmra. For extra Advanced Usages, please go to the official website.

Related Posts

svg-pan-zoom-container

Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…

html-table-sortable-js

Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…

WYSIWYG-Rich-Text-Editor

WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…

email-domain-autocomplete-genie

[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…

JavaScript-Library-for-Creating-Squircley-Magic

[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…

Leave a Reply

Your email address will not be published. Required fields are marked *