How to Use Tobii: An Open-Source Lightbox Solution

Sep 25, 2024 | Programming

If you’re looking for an accessible, dependency-free lightbox solution to enhance your web content presentation, Tobii is a fantastic choice. This guide will walk you through how to get Tobii up and running, how to use it for different media types, and troubleshooting tips to ensure seamless integration.

Features of Tobii

  • No dependencies
  • Supports multiple content types:
    • Images
    • Inline HTML
    • Iframes
    • Videos (YouTube, Vimeo)
  • Grouping of content
  • Customizable with settings and CSS
  • Accessible with ARIA roles and keyboard navigation
  • Responsive design supporting touch and mouse drag

Getting Started with Tobii

Download Tobii

To get started, you need to download the required files:

  • CSS: dist/tobii.min.css
  • JavaScript: Available in multiple formats:
    • dist/tobii.min.js – for maximum browser support (including IE 11)
    • dist/tobii.mjs – designed for modern browsers
    • dist/tobii.js – CommonJS Node build
    • dist/tobii.module.js – ESM build
    • dist/tobii.umd.js – UMD build

Using Package Managers

If you prefer, you can also install Tobii via npm:

npm install @midzertobii --save

Usage

To integrate Tobii into your project, include the CSS and JavaScript files in your HTML. Here’s a simple example:

<!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>

Once you have included the files, initialize Tobii by executing:

const tobii = new Tobii();

Handling Different Media Types

Tobii is versatile and accommodates various media types:

Using Images

To display an image, link the thumbnail image with the class name lightbox to a larger image:

<a href="pathtoimage.jpg" class="lightbox">
    <img src="pathtothumbnail.jpg" alt="I am a caption">
</a>

Inline HTML

For inline HTML, create an element with a unique ID:

<div id="selector">
    <!-- Your HTML content -->
</div>

Using Iframes and YouTube

Create a link for iframes or YouTube videos using the lightbox class:

<a href="https://www.wikipedia.org" class="lightbox" data-type="iframe">Open Wikipedia</a>

For YouTube, add the video ID:

<a href="#" class="lightbox" data-type="youtube" data-id="KU2sSZ_90PY">Open YouTube video</a>

Grouping Content

To create groups of related images, use the data-group attribute:

<a href="pathtoimage_1.jpg" class="lightbox" data-group="vacation">
    <img src="pathtothumbnail_1.jpg" alt="I am a caption">
</a>

Custom Options

You can customize Tobii by passing an object with various options:

const tobii = new Tobii({
    captions: false
});

Troubleshooting Tips

  • If Tobii isn’t opening, check that your HTML structure is correct and the JavaScript is properly linked.
  • Make sure there are no conflicting CSS styles affecting the lightbox display.
  • Ensure that the required attributes like data-type are properly set for each media type.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox