PHPackages mably/tobii - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mably/tobii ActiveDrupal-library[Utility & Helpers](/categories/utility) mably/tobii =========== Mirror of the tobii javascript library tagged as a Drupal library. 1856↑43.3%1JavaScript Since Feb 11Pushed 5mo agoCompare [ Source](https://github.com/mably/tobii)[ Packagist](https://packagist.org/packages/mably/tobii)[ RSS](/packages/mably-tobii/feed)WikiDiscussions drupal Synced today READMEChangelogDependenciesVersions (4)Used By (0) Tobii ===== [](#tobii) [![Version](https://camo.githubusercontent.com/c762a83e7e87c4023f0c36bfb7dca8c6f66ff57d85e546d2b238ce1e0e932f4a/68747470733a2f2f62616467656e2e6e65742f6e706d2f762f406d69647a65722f746f626969)](https://github.com/midzer/tobii/releases)[![License](https://camo.githubusercontent.com/0d98b4184cd499329afe869f4077ea8c40137f5d06bf491d012255a3af4a2bea/68747470733a2f2f62616467656e2e6e65742f6e706d2f6c6963656e73652f406d69647a65722f746f626969)](https://github.com/midzer/tobii/blob/master/LICENSE.md)[![Dependencies](https://camo.githubusercontent.com/816d16d3dbe0b69cd68f66c2f2ee1306ff756b926fac7fbfe37f0464ede932be/68747470733a2f2f62616467656e2e6e65742f6e706d2f646570656e64656e74732f406d69647a65722f746f626969)](https://camo.githubusercontent.com/816d16d3dbe0b69cd68f66c2f2ee1306ff756b926fac7fbfe37f0464ede932be/68747470733a2f2f62616467656e2e6e65742f6e706d2f646570656e64656e74732f406d69647a65722f746f626969)[![npm bundle size](https://camo.githubusercontent.com/a63e9599cbcafcdc92d5fb4f10b7b868a133cf4bac788584a238e340763d993c/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f406d69647a65722f746f626969)](https://camo.githubusercontent.com/a63e9599cbcafcdc92d5fb4f10b7b868a133cf4bac788584a238e340763d993c/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f406d69647a65722f746f626969) An accessible, open-source lightbox with no dependencies. [See it in Action](https://midzer.github.io/tobii/demo/) [![Open slide with a picture of the Berlin television tower](https://camo.githubusercontent.com/d6408ae79d8a09c31dd7893222e07867ea5b93e9ce081e5bb051c8010f221386/68747470733a2f2f727172617568766d72612e636f6d2f746f62692f746f62692e706e67)](https://camo.githubusercontent.com/d6408ae79d8a09c31dd7893222e07867ea5b93e9ce081e5bb051c8010f221386/68747470733a2f2f727172617568766d72612e636f6d2f746f62692f746f62692e706e67) Table of contents ----------------- [](#table-of-contents) - [Features](#features) - [Get Tobii](#get-tobii) - [Download](#download) - [Package managers](#package-managers) - [Usage](#usage) - [Media types](#media-types) - [Image](#image) - [Inline HTML](#inline-html) - [Iframe](#iframe) - [YouTube](#youtube) - [Grouping](#grouping) - [Options](#options) - [API](#api) - [Events](#events) - [Browser support](#browser-support) - [Contributing](#contributing) - [License](#license) Features -------- [](#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 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, focus returns to what was in focus before Tobii opened - Touch & mouse drag/swipe support: - Horizontal to navigate through slides - Vertical up to close Tobii - Double click, pinch and wheel zoom: - Hold pointer to pan - Responsive Get Tobii --------- [](#get-tobii) ### Download [](#download) CSS: `dist/tobii.min.css` JavaScript: - `dist/tobii.min.js`: minified IIFE build - `dist/tobii.modern.js`: Build specially designed to work in all modern browsers - `dist/tobii.module.js`: ESM build - `dist/tobii.umd.js`: UMD build - `dist/tobii.js`: CommonJS/Node build ### Package managers [](#package-managers) Tobii is also available on npm. `npm install @midzer/tobii --save` Usage ----- [](#usage) You can install Tobii by linking the `.css` and `.js` files to your HTML file. The HTML code may look like this: ``` > Your page title ``` Initialize the script by running: ``` const tobii = new Tobii() ``` Media types ----------- [](#media-types) ### Image [](#image) The standard way of using Tobii is a linked thumbnail image with the class name `lightbox` to a larger image: ``` ``` Instead of a thumbnail, you can also refer to a larger image with a text link: ``` Open image ``` If you use a Markdown parser or CMS and want to make all images in a post automatically viewable in a lightbox, use the following JavaScript code to add all images to the same album: ``` document.addEventListener('DOMContentLoaded', () => { // This assumes your article is wrapped in an element with the class "content-article". document.querySelectorAll('.content-article img').forEach((articleImg) => { // Add lightbox elements in blog articles for Tobii. const lightbox = document.createElement('a'); lightbox.href = articleImg.src; lightbox.classList.add('lightbox'); lightbox.dataset.group = 'article'; articleImg.parentNode.appendChild(lightbox); lightbox.appendChild(articleImg); }); }); ``` ### Inline-HTML [](#inline-html) For inline HTML, create an element with a unique ID: ``` ``` Then create a link with the class name `lightbox` and a `href` attribute that matches the ID of the element: ``` Open HTML content ``` or a button with the class name `lightbox` and a `data-target` attribute that matches the ID of the element: ``` Open HTML content ``` In both ways, the attribute `data-type` with the value `html` is required. ### Iframe [](#iframe) For an iframe, create a link with the class name `lightbox`: ``` Open Wikipedia ``` or a button with the class name `lightbox` and a `data-target` attribute: ``` Open Wikipedia ``` In both ways, the attribute `data-type` with the value `iframe` is required. #### Optional attributes [](#optional-attributes) - `data-height` set the height and `data-width` the width of the iframe. ### YouTube [](#youtube) For a YouTube video, create a link with the class name `lightbox` and a `data-id` attribute with the YouTube video ID: ``` Open YouTube video ``` or a button with the class name `lightbox` and a `data-id` attribute with the YouTube video ID: ``` Open YouTube video ``` In both ways, the attribute `data-type` with the value `youtube` is required. #### Optional attributes [](#optional-attributes-1) - `data-controls` indicates whether the video player controls are displayed: `0` do not display and `1` display controls in the player. - `data-height` set the height and `data-width` the width of the player. I recommend using an external library for responsive iframes. Grouping -------- [](#grouping) If you have a group of related types that you would like to combine into a set, add the `data-group` attribute: ``` // ... // ... ``` Options ------- [](#options) You can pass an object with custom options as an argument. ``` const tobii = new Tobii({ captions: false }) ``` The following options are available: PropertyTypeDefaultDescriptionselectorstring".lightbox"All elements with this class trigger Tobii. Pass `""` or `false` to init Tobii only (and `add()` later)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 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.captionTogglebooltrueAllows users to hide or show the caption by clicking or tapping on it.captionToggleLabelstring\["Hide caption", "Show caption"\]Labels for the caption display toggle button.navbool, "auto""auto"Display navigation buttons. "auto" hides 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 close button.closeTextstring"inline svg"Text or HTML for the close button.closeLabelstring"Close"ARIA label for screen readers.dialogTitlestring"Lightbox"ARIA label for screen readers.loadingIndicatorLabelstring"Image loading"ARIA label for screen readers.counterbooltrueDisplay current image index.keyboardbooltrueAllow keyboard navigation.zoomboolfalseDisplay 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).### Data attributes [](#data-attributes) You can also use data attributes to customize HTML elements. ``` Open image. ``` The following options are available: PropertyDescriptiondata-typeSets media type. Possible values: `html`,`iframe`,`youtube`.data-idRequired for youtube media type.data-targetCan be used to set target for "iframe" and "html" types.data-groupSet custom groupdata-widthSet container width for iframe or youtube types.data-heightSet container height for 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 imagesdata-zoomAllows to enable or disable zoom icon. Values: "true" or "false"API --- [](#api) 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 ------ [](#events) Bind events with the `.on()` and `.off()` methods. ``` const tobii = new Tobii() const listener = function listener () { console.log('eventName happened') } // bind event listener tobii.on(eventName, listener) // unbind event listener tobii.off(eventName, listener) ``` eventNameDescription`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.Browser support --------------- [](#browser-support) Tobii supports the following browser (all the latest versions): - Chrome - Firefox - Edge - Safari Build instructions ------------------ [](#build-instructions) See [Wiki > Build instructions](https://github.com/midzer/tobii/wiki/Build-instructions) Contributing ------------ [](#contributing) - Open an issue or a pull request to suggest changes or additions - Spread the word License ------- [](#license) Tobii is available under the MIT license. See the [LICENSE](https://github.com/midzer/Tobii/blob/master/LICENSE.md) file for more info. ### Health Score 27 — LowBetter than 47% of packages Maintenance48 Moderate activity, may be stable Popularity21 Limited adoption so far Community15 Small or concentrated contributor base Maturity20 Early-stage or recently created project Bus Factor1 Top contributor holds 62.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/50adb591a0b201918bd150eff0cd4e536907b07a8a3b05afcc1993802b5bb139?d=identicon)[mably](/maintainers/mably) --- Top Contributors [![midzer](https://avatars.githubusercontent.com/u/6484844?v=4)](https://github.com/midzer "midzer (178 commits)")[![viliusle](https://avatars.githubusercontent.com/u/3708786?v=4)](https://github.com/viliusle "viliusle (52 commits)")[![mably](https://avatars.githubusercontent.com/u/385653?v=4)](https://github.com/mably "mably (26 commits)")[![ocean90](https://avatars.githubusercontent.com/u/617637?v=4)](https://github.com/ocean90 "ocean90 (19 commits)")[![Alex313031](https://avatars.githubusercontent.com/u/45863095?v=4)](https://github.com/Alex313031 "Alex313031 (3 commits)")[![MoritzLost](https://avatars.githubusercontent.com/u/10146880?v=4)](https://github.com/MoritzLost "MoritzLost (2 commits)")[![Calinou](https://avatars.githubusercontent.com/u/180032?v=4)](https://github.com/Calinou "Calinou (2 commits)")[![refi64](https://avatars.githubusercontent.com/u/1690697?v=4)](https://github.com/refi64 "refi64 (1 commits)")[![felixranesberger](https://avatars.githubusercontent.com/u/52704891?v=4)](https://github.com/felixranesberger "felixranesberger (1 commits)") ### Embed Badge ![Health badge](/badges/mably-tobii/health.svg) ``` [![Health](https://phpackages.com/badges/mably-tobii/health.svg)](https://phpackages.com/packages/mably-tobii) ``` ### Alternatives [optimistdigital/nova-notes-field This Laravel Nova package adds a notes field to Nova's arsenal of fields. 52145.0k](/packages/optimistdigital-nova-notes-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)