An accessible, simple and light-weight open source lightbox script with no dependencies.
- No dependencies
- Accessible:
- ARIA roles
- Keyboard navigation:
Prev
/Next
Keys: Navigate through itemsESCAPE
Key: Close the lightboxTAB
Key: Focus elements within the lightbox, not outside
- User preference media features:
prefers-reduced-motion
media query
- When the lightbox opens, focus is set to the first focusable element in the lightbox
- When the lightbox closes, focus returns to what was in focus before the lightbox opened
- Touch & Mouse drag support:
- Drag / Swipe to navigate through items, close the lightbox with a vertical drag/swipe
- light-weight
- Responsive
CSS: css/tobi.min.css
minified, or css/tobi.css
un-minified
JavaScript: js/tobi.min.js
minified, or js/tobi.js
un-minified
Tobi is also available on npm.
$ npm install wongjn/tobi --save
You can install Tobi by linking the .css
and .js
files to your html file. The HTML code may 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="tobi.min.css" rel="stylesheet">
</head>
<body>
<!-- Your HTML content -->
<!-- JS -->
<script src="tobi.min.js"></script>
</body>
</html>
Initialize the script by running:
const tobi = new Tobi({
items: listOfHTMLElements,
});
Each element passed in the items
parameter must have the full image in href
property of its corresponding JavaScript object.
<a href="path/to/image.jpg">
<img src="path/to/thumbnail.jpg" alt="I am a caption">
</a>
The following options are available:
Property | Type | Default | Description |
---|---|---|---|
items | Node[] | []] | Elements to be added into the lightbox, required. |
captions | bool | true | Display captions, if available. |
captionsSelector | "self", "img" | "img" | Set the element where the caption is. Set it to "self" for the a tag itself. |
captionAttribute | string | "alt" | Get the caption from given attribute. |
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. |
loadingIndicatorLabel | string | "Image loading" | ARIA label for screen readers. |
counter | bool | true | Display current image index. |
keyboard | bool | true | Allow keyboard navigation. |
docClose | bool | true | Closes the lightbox when clicking outside. |
swipeClose | bool | true | Swipe up to close lightbox. |
hideScrollbar | bool | true | Hide browser scrollbars if lightbox is displayed. |
draggable | bool | true | Use dragging and touch swiping. |
threshold | number | 100 | Touch and mouse dragging threshold (in px). |
Function | Description |
---|---|
open(index, callback) |
Opens the lightbox. Optional at specific index (number) and optional callback (function) as a second argument. |
next(callback) |
Shows the next slide in the lightbox. Optional callback (function). |
prev(callback) |
Shows the previous slide in the lightbox. Optional callback (function). |
close(callback) |
Closes the lightbox. Optional callback (function). |
add(element, callback) |
Adds an new element (DOM element) dynamically, even if the lightbox is open (example on CodePen). Optional callback (function) as a second argument (example on CodePen). |
remove() |
Complete dismantles the lightbox from the dom. |
isOpen() |
Checks if the lightbox is open. |
currentSlide() |
Returns the current slide index. |
Tobi has been tested in the following browsers (all the latest versions):
- Chrome
- Firefox
- Internet Explorer
- Edge
- Safari
- Report issues
- Open pull request with improvements
- Spread the word
Tobi is available under the MIT license. See the LICENSE file for more info.