- Notifications
You must be signed in to change notification settings - Fork26
An accessible, open-source lightbox with no dependencies
License
midzer/tobii
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An accessible, open-source lightbox with no dependencies.
- 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/NextKeys: Navigate through slidesESCAPEKey: Close TobiiTABKey: Focus elements within Tobii, not outside
- User preference media features:
prefers-reduced-motionmedia 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
CSS:dist/tobii.min.css
#"auto">
dist/tobii.min.js: IIFE build for maximum browser support, including IE 11dist/tobii.modern.js: Build specially designed to work in all modern browsersdist/tobii.module.js: ESM builddist/tobii.umd.js: UMD builddist/tobii.js: CommonJS/Node buildTobii is also available on npm.
npm install @midzer/tobii --save
You can install Tobii by linking the.css and.js files to your HTML file. The HTML code may look like this:
<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Your page title</title><!-- CSS --><linkhref="tobii.min.css"rel="stylesheet"></head><body><!-- Your HTML content --><!-- JS --><scriptsrc="tobii.min.js"></script></body></html>
Initialize the script by running:
consttobii=newTobii()
The standard way of using Tobii is a linked thumbnail image with the class namelightbox to a larger image:
<ahref="path/to/image.jpg"class="lightbox"><imgsrc="path/to/thumbnail.jpg"alt="I am a caption"></a>
Instead of a thumbnail, you can also refer to a larger image with a text link:
<ahref="path/to/image.jpg"class="lightbox"> Open image</a>
If you use a Markdown parser or CMS and want to make all images in a postautomatically viewable in a lightbox, use the following JavaScript code to addall 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.constlightbox=document.createElement('a');lightbox.href=articleImg.src;lightbox.classList.add('lightbox');lightbox.dataset.group='article';articleImg.parentNode.appendChild(lightbox);lightbox.appendChild(articleImg);});});
For inline HTML, create an element with a unique ID:
<divid="selector"><!-- Your HTML content --></div>
Then create a link with the class namelightbox and ahref attribute that matches the ID of the element:
<ahref="#selector"data-type="html"class="lightbox"> Open HTML content</a>
or a button with the class namelightbox and adata-target attribute that matches the ID of the element:
<buttontype="button"data-type="html"data-target="#selector"class="lightbox"> Open HTML content</button>
In both ways, the attributedata-type with the valuehtml is required.
For an iframe, create a link with the class namelightbox:
<ahref="https://www.wikipedia.org"data-type="iframe"class="lightbox"> Open Wikipedia</a>
or a button with the class namelightbox and adata-target attribute:
<buttontype="button"data-type="iframe"data-target="https://www.wikipedia.org"class="lightbox"> Open Wikipedia</button>
In both ways, the attributedata-type with the valueiframe is required.
data-heightset the height anddata-widththe width of the iframe.
For a YouTube video, create a link with the class namelightbox and adata-id attribute with the YouTube video ID:
<ahref="#"data-type="youtube"data-id="KU2sSZ_90PY"class="lightbox"> Open YouTube video</a>
or a button with the class namelightbox and adata-id attribute with the YouTube video ID:
<buttontype="button"data-type="youtube"data-id="KU2sSZ_90PY"class="lightbox"> Open YouTube video</button>
In both ways, the attributedata-type with the valueyoutube is required.
data-controlsindicates whether the video player controls are displayed:0do not display and1display controls in the player.data-heightset the height anddata-widththe width of the player. I recommend using an external library for responsive iframes.
If you have a group of related types that you would like to combine into a set, add thedata-group attribute:
<ahref="path/to/image_1.jpg"class="lightbox"data-group="vacation"><imgsrc="path/to/thumbnail_1.jpg"alt="I am a caption"></a><ahref="path/to/image_2.jpg"class="lightbox"data-group="vacation"><imgsrc="path/to/thumbnail_2.jpg"alt="I am a caption"></a>// ...<ahref="path/to/image_4.jpg"class="lightbox"data-group="birthday"><imgsrc="path/to/thumbnail_4.jpg"alt="I am a caption"></a>// ...
You can pass an object with custom options as an argument.
consttobii=newTobii({captions:false})
The following options are available:
| Property | Type | Default | Description |
|---|---|---|---|
| selector | string | ".lightbox" | All elements with this class triggers Tobii. |
| captions | bool | true | Display captions, if available. |
| captionsSelector | "self", "img" | "img" | Set the element where the caption is. Set it to "self" for thea tag itself. |
| captionAttribute | string | "alt" | Get the caption from 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 andcaptionAttribute are ignored. |
| captionHTML | bool | false | Allow HTML captions. |
| nav | bool, "auto" | "auto" | Display navigation buttons. "auto" hides 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 close button. |
| closeText | string | "inline svg" | Text or HTML for the close button. |
| closeLabel | string | "Close" | ARIA label for screen readers. |
| dialogTitle | string | "Lightbox" | ARIA label for screen readers. |
| loadingIndicatorLabel | string | "Image loading" | ARIA label for screen readers. |
| counter | bool | true | Display 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. |
You can also use data attributes to customize HTML elements.
<ahref="path/to/image.jpg"class="lightbox"data-group="custom-group"> Open image.</a>
The following options are available:
| 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 target for "iframe" and "html" types. |
| data-group | Set custom group |
| data-width | Set container width for iframe or youtube types. |
| data-height | Set container height for 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" |
| Function | Description |
|---|---|
open(index) | Open Tobii. Optionalindex (Integer), zero-based index of the slide to open. |
select(index) | Select a slide withindex (Integer), zero-based index of the slide to select. |
previous() | Select the previous slide. |
next() | Select the next slide. |
selectGroup(value) | Select a group withvalue (string), name of the group to select. |
close() | Close Tobii. |
add(element) | Addelement (DOM element). |
remove(element) | Removeelement (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. |
Bind events with the.on() and.off() methods.
consttobii=newTobii()constlistener=functionlistener(){console.log('eventName happened')}// bind event listenertobii.on(eventName,listener)// unbind event listenertobii.off(eventName,listener)
| 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. |
Tobii supports the following browser (all the latest versions):
- Chrome
- Firefox
- Internet Explorer 11
- Edge
- Safari
- Open an issue or a pull request to suggest changes or additions
- Spread the word
Tobii is available under the MIT license. See theLICENSE file for more info.
About
An accessible, open-source lightbox with no dependencies