{"id":13906473,"url":"https://github.com/midzer/tobii","last_synced_at":"2026-02-06T12:48:05.419Z","repository":{"id":38320788,"uuid":"216817646","full_name":"midzer/tobii","owner":"midzer","description":"An accessible, open-source lightbox with no dependencies","archived":false,"fork":false,"pushed_at":"2023-09-22T15:32:33.000Z","size":1199,"stargazers_count":189,"open_issues_count":18,"forks_count":20,"subscribers_count":5,"default_branch":"production","last_synced_at":"2024-05-09T15:23:47.661Z","etag":null,"topics":["a11y","accessible","css","javascript","lightbox","scss","vanilla"],"latest_commit_sha":null,"homepage":"https://midzer.github.io/tobii/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/midzer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"midzer","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-10-22T13:13:59.000Z","updated_at":"2024-05-06T22:00:21.000Z","dependencies_parsed_at":"2023-10-21T13:15:09.053Z","dependency_job_id":null,"html_url":"https://github.com/midzer/tobii","commit_stats":{"total_commits":208,"total_committers":9,"mean_commits":23.11111111111111,"dds":0.6682692307692308,"last_synced_commit":"4bd4dfaa57ca7902c69ee7ce5a6fd5866c1ac000"},"previous_names":["rqrauhvmra/tobii"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midzer%2Ftobii","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midzer%2Ftobii/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midzer%2Ftobii/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midzer%2Ftobii/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/midzer","download_url":"https://codeload.github.com/midzer/tobii/tar.gz/refs/heads/production","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessible","css","javascript","lightbox","scss","vanilla"],"created_at":"2024-08-06T23:01:36.562Z","updated_at":"2026-02-06T12:48:05.406Z","avatar_url":"https://github.com/midzer.png","language":"JavaScript","readme":"# Tobii\n\n[![Version](https://badgen.net/npm/v/@midzer/tobii)](https://github.com/midzer/tobii/releases)\n[![License](https://badgen.net/npm/license/@midzer/tobii)](https://github.com/midzer/tobii/blob/master/LICENSE.md)\n![Dependencies](https://badgen.net/npm/dependents/@midzer/tobii)\n![npm bundle size](https://badgen.net/bundlephobia/minzip/@midzer/tobii)\n\nAn accessible, open-source lightbox with no dependencies.\n\n[See it in Action](https://midzer.github.io/tobii/demo/)\n\n![Open slide with a picture of the Berlin television tower](https://rqrauhvmra.com/tobi/tobi.png)\n\n## Table of contents\n\n- [Features](#features)\n- [Get Tobii](#get-tobii)\n  - [Download](#download)\n  - [Package managers](#package-managers)\n- [Usage](#usage)\n- [Media types](#media-types)\n  - [Image](#image)\n  - [Inline HTML](#inline-html)\n  - [Iframe](#iframe)\n  - [YouTube](#youtube)\n- [Grouping](#grouping)\n- [Options](#options)\n- [API](#api)\n- [Events](#events)\n- [Browser support](#browser-support)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\n- No dependencies\n- Supports multiple content types:\n  - Images\n  - Inline HTML\n  - Iframes\n  - Videos (YouTube, Vimeo)\n- Grouping\n- Events\n- Customizable with settings and CSS\n- Accessible:\n  - ARIA roles\n  - Keyboard navigation:\n    - `Prev`/ `Next` Keys: Navigate through slides\n    - `ESCAPE` Key: Close Tobii\n    - `TAB` Key: Focus elements within Tobii, not outside\n  - User preference media features:\n    - `prefers-reduced-motion` media query\n  - When Tobii opens, focus is set to the first focusable element in Tobii\n  - When Tobii closes, focus returns to what was in focus before Tobii opened\n- Touch \u0026 mouse drag/swipe support:\n  - Horizontal to navigate through slides\n  - Vertical up to close Tobii\n- Double click, pinch and wheel zoom:\n  - Hold pointer to pan\n- Responsive\n\n## Get Tobii\n\n### Download\n\nCSS: `dist/tobii.min.css`\n\nJavaScript:\n\n* `dist/tobii.min.js`: minified IIFE build\n* `dist/tobii.modern.js`: Build specially designed to work in all modern browsers\n* `dist/tobii.module.js`: ESM build\n* `dist/tobii.umd.js`: UMD build\n* `dist/tobii.js`: CommonJS/Node build\n\n### Package managers\n\nTobii is also available on npm.\n\n`npm install @midzer/tobii --save`\n\n## Usage\n\nYou can install Tobii by linking the `.css` and `.js` files to your HTML file. The HTML code may look like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003ctitle\u003eYour page title\u003c/title\u003e\n\n  \u003c!-- CSS --\u003e\n  \u003clink href=\"tobii.min.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- Your HTML content --\u003e\n\n  \u003c!-- JS --\u003e\n  \u003cscript src=\"tobii.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nInitialize the script by running:\n\n```js\nconst tobii = new Tobii()\n```\n\n## Media types\n\n### Image\n\nThe standard way of using Tobii is a linked thumbnail image with the class name `lightbox` to a larger image:\n\n```html\n\u003ca href=\"path/to/image.jpg\" class=\"lightbox\"\u003e\n  \u003cimg src=\"path/to/thumbnail.jpg\" alt=\"I am a caption\"\u003e\n\u003c/a\u003e\n```\n\nInstead of a thumbnail, you can also refer to a larger image with a text link:\n\n```html\n\u003ca href=\"path/to/image.jpg\" class=\"lightbox\"\u003e\n  Open image\n\u003c/a\u003e\n```\n\nIf you use a Markdown parser or CMS and want to make all images in a post\nautomatically viewable in a lightbox, use the following JavaScript code to add\nall images to the same album:\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  // This assumes your article is wrapped in an element with the class \"content-article\".\n  document.querySelectorAll('.content-article img').forEach((articleImg) =\u003e {\n    // Add lightbox elements in blog articles for Tobii.\n    const lightbox = document.createElement('a');\n    lightbox.href = articleImg.src;\n    lightbox.classList.add('lightbox');\n    lightbox.dataset.group = 'article';\n    articleImg.parentNode.appendChild(lightbox);\n    lightbox.appendChild(articleImg);\n  });\n});\n```\n\n### Inline-HTML\n\nFor inline HTML, create an element with a unique ID:\n\n```html\n\u003cdiv id=\"selector\"\u003e\n  \u003c!-- Your HTML content --\u003e\n\u003c/div\u003e\n```\n\nThen create a link with the class name `lightbox` and a `href` attribute that matches the ID of the element:\n\n```html\n\u003ca href=\"#selector\" data-type=\"html\" class=\"lightbox\"\u003e\n  Open HTML content\n\u003c/a\u003e\n```\n\nor a button with the class name `lightbox` and a `data-target` attribute that matches the ID of the element:\n\n```html\n\u003cbutton type=\"button\" data-type=\"html\" data-target=\"#selector\" class=\"lightbox\"\u003e\n  Open HTML content\n\u003c/button\u003e\n```\n\nIn both ways, the attribute `data-type` with the value `html` is required.\n\n### Iframe\n\nFor an iframe, create a link with the class name `lightbox`:\n\n```html\n\u003ca href=\"https://www.wikipedia.org\" data-type=\"iframe\" class=\"lightbox\"\u003e\n  Open Wikipedia\n\u003c/a\u003e\n```\n\nor a button with the class name `lightbox` and a `data-target` attribute:\n\n```html\n\u003cbutton type=\"button\" data-type=\"iframe\" data-target=\"https://www.wikipedia.org\" class=\"lightbox\"\u003e\n  Open Wikipedia\n\u003c/button\u003e\n```\n\nIn both ways, the attribute `data-type` with the value `iframe` is required.\n\n#### Optional attributes\n\n- `data-height` set the height and `data-width` the width of the iframe.\n\n### YouTube\n\nFor a YouTube video, create a link with the class name `lightbox` and a `data-id` attribute with the YouTube video ID:\n\n```html\n\u003ca href=\"#\" data-type=\"youtube\" data-id=\"KU2sSZ_90PY\" class=\"lightbox\"\u003e\n  Open YouTube video\n\u003c/a\u003e\n```\n\nor a button with the class name `lightbox` and a `data-id` attribute with the YouTube video ID:\n\n```html\n\u003cbutton type=\"button\" data-type=\"youtube\" data-id=\"KU2sSZ_90PY\" class=\"lightbox\"\u003e\n  Open YouTube video\n\u003c/button\u003e\n```\n\nIn both ways, the attribute `data-type` with the value `youtube` is required.\n\n#### Optional attributes\n\n- `data-controls` indicates whether the video player controls are displayed: `0` do not display and `1` display controls in the player.\n- `data-height` set the height and `data-width` the width of the player. I recommend using an external library for responsive iframes.\n\n## Grouping\n\nIf you have a group of related types that you would like to combine into a set, add the `data-group` attribute:\n\n```html\n\u003ca href=\"path/to/image_1.jpg\" class=\"lightbox\" data-group=\"vacation\"\u003e\n  \u003cimg src=\"path/to/thumbnail_1.jpg\" alt=\"I am a caption\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"path/to/image_2.jpg\" class=\"lightbox\" data-group=\"vacation\"\u003e\n  \u003cimg src=\"path/to/thumbnail_2.jpg\" alt=\"I am a caption\"\u003e\n\u003c/a\u003e\n\n// ...\n\n\u003ca href=\"path/to/image_4.jpg\" class=\"lightbox\" data-group=\"birthday\"\u003e\n  \u003cimg src=\"path/to/thumbnail_4.jpg\" alt=\"I am a caption\"\u003e\n\u003c/a\u003e\n\n// ...\n```\n\n## Options\n\nYou can pass an object with custom options as an argument.\n\n```js\nconst tobii = new Tobii({\n  captions: false\n})\n```\n\nThe following options are available:\n\n| Property | Type | Default | Description |\n| --- | --- | --- | --- |\n| selector | string | \".lightbox\" | All elements with this class trigger Tobii. Pass `\"\"` or `false` to init Tobii only (and `add()` later) |\n| captions | bool | true | Display captions, if available. |\n| captionsSelector | \"self\", \"img\" | \"img\" | Set the element where the caption is. Set it to \"self\" for the `a` tag itself. |\n| captionAttribute | string | \"alt\" | Get the caption from given attribute. |\n| 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. |\n| captionHTML | bool | false | Allow HTML captions. |\n| captionToggle | bool | true | Allows users to hide or show the caption by clicking or tapping on it. |\n| captionToggleLabel | string | [\"Hide caption\", \"Show caption\"] | Labels for the caption display toggle button. |\n| nav | bool, \"auto\" | \"auto\" | Display navigation buttons. \"auto\" hides buttons on touch-enabled devices. |\n| navText | string | [\"inline svg\", \"inline svg\"] | Text or HTML for the navigation buttons. |\n| navLabel | string | [\"Previous\", \"Next\"] | ARIA label for screen readers. |\n| close | bool | true | Display close button. |\n| closeText | string | \"inline svg\" | Text or HTML for the close button. |\n| closeLabel | string | \"Close\" | ARIA label for screen readers. |\n| dialogTitle | string | \"Lightbox\" | ARIA label for screen readers. |\n| loadingIndicatorLabel | string | \"Image loading\" | ARIA label for screen readers. |\n| counter | bool | true | Display current image index. |\n| keyboard | bool | true | Allow keyboard navigation. |\n| zoom | bool | false | Display zoom icon. |\n| zoomText | string | \"inline svg\" | Text or HTML for the zoom icon. |\n| docClose | bool | true | Click outside to close Tobii. |\n| swipeClose | bool | true | Swipe up to close Tobii. |\n| draggable | bool | true | Use dragging and touch swiping. |\n| threshold | number | 100 | Touch and mouse dragging threshold (in px). |\n\n### Data attributes\n\nYou can also use data attributes to customize HTML elements.\n\n```js\n\u003ca href=\"path/to/image.jpg\" class=\"lightbox\" data-group=\"custom-group\"\u003e\n  Open image.\n\u003c/a\u003e\n```\n\nThe following options are available:\n\n| Property | Description |\n| --- | --- |\n| data-type | Sets media type. Possible values: `html`,`iframe`,`youtube`. |\n| data-id | Required for youtube media type. |\n| data-target | Can be used to set target for \"iframe\" and \"html\" types. |\n| data-group | Set custom group |\n| data-width | Set container width for iframe or youtube types.  |\n| data-height | Set container height for iframe or youtube types. |\n| data-controls | Indicates whether the video player controls are displayed: 0 do not display and 1 display controls in the player. |\n| data-allow | Allows to set allow attribute on iframes. |\n| data-srcset | Allows to have Responsive image or retina images  |\n| data-zoom | Allows to enable or disable zoom icon. Values: \"true\" or \"false\"  |\n\n## API\n\n| Function | Description |\n| --- | --- |\n| `open(index)` | Open Tobii. Optional `index` (Integer), zero-based index of the slide to open. |\n| `select(index)` | Select a slide with `index` (Integer), zero-based index of the slide to select. |\n| `previous()` | Select the previous slide. |\n| `next()` | Select the next slide. |\n| `selectGroup(value)` | Select a group with `value` (string), name of the group to select. |\n| `close()` | Close Tobii. |\n| `add(element)` | Add `element` (DOM element). |\n| `remove(element)` | Remove `element` (DOM element). |\n| `isOpen()` | Check if Tobii is open. |\n| `slidesIndex()` | Return the current slide index. |\n| `slidesCount()` | Return the current number of slides. |\n| `currentGroup()` | Return the current group name. |\n| `reset()` | Reset Tobii. |\n| `destroy()` | Destroy Tobii. |\n\n## Events\n\nBind events with the `.on()` and `.off()` methods.\n\n```js\nconst tobii = new Tobii()\n\nconst listener = function listener () {\n  console.log('eventName happened')\n}\n\n// bind event listener\ntobii.on(eventName, listener)\n\n// unbind event listener\ntobii.off(eventName, listener)\n```\n\n| eventName | Description |\n| --- | --- |\n| `open` | Triggered after Tobii has been opened. |\n| `close` | Triggered after Tobii has been closed. |\n| `previous` | Triggered after the previous slide is selected. |\n| `next` | Triggered after the next slide is selected. |\n\n## Browser support\n\nTobii supports the following browser (all the latest versions):\n\n- Chrome\n- Firefox\n- Edge\n- Safari\n\n## Build instructions\nSee [Wiki \u003e Build instructions](https://github.com/midzer/tobii/wiki/Build-instructions)\n\n## Contributing\n\n- Open an issue or a pull request to suggest changes or additions\n- Spread the word\n\n## License\n\nTobii is available under the MIT license. See the [LICENSE](https://github.com/midzer/Tobii/blob/master/LICENSE.md) file for more info.\n","funding_links":["https://github.com/sponsors/midzer"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidzer%2Ftobii","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmidzer%2Ftobii","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidzer%2Ftobii/lists"}