rqrauhvmra__tobi
Advanced tools
Readme
An accessible, simple and light-weight open source lightbox script with no dependencies.
Prev/Next Keys: Navigate through itemsESCAPE Key: Close the lightboxTAB Key: Focus elements within the lightbox, not outsideCSS: 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 rqrauhvmra__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:
var tobi = new Tobi()
The standard way of using Tobi is a linked thumbnail image with the class name lightbox to a larger image:
<a href="path/to/image.jpg" class="lightbox">
<img src="path/to/thumbnail.jpg" alt="I am a caption">
</a>
Instead of a thumbnail, you can also refer to a larger image with a textlink:
<a href="path/to/image.jpg" class="lightbox">
Open image
</a>
For inline HTML, create an element with a unique ID:
<div id="selector">
<!-- Your HTML content -->
</div>
Then create a link with the class name lightbox and a href attribute that matches the ID of the element:
<a href="#selector" data-type="html" class="lightbox">
Open HTML content / video or something else
</a>
or a button with the class name lightbox and a data-target attribute that matches the ID of the element:
<button type="button" data-type="html" data-target="#selector" class="lightbox">
Open HTML content / video or something else
</button>
In any case, the attribute data-type with the value html must be added.
For an iframe simply create a link with the class name lightbox:
<a href="https://www.wikipedia.org" data-type="iframe" class="lightbox">
Open Wikipedia
</a>
or a button with the class name lightbox and a data-target attribute:
<button type="button" data-type="iframe" data-target="https://www.wikipedia.org" class="lightbox">
Open Wikipedia
</button>
In any case, the attribute data-type with the value iframe must be added. The iframe dimensions can be controlled by CSS.
You can pass an object with custom options as an argument.
var tobi = new Tobi({
captions: false
})
The following options are available:
| Property | Type | Default | Description |
|---|---|---|---|
| selector | string | ".lightbox" | All elements with this class triggers the lightbox. |
| 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. |
| 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 | Closes the lightbox when clicking outside |
| swipeClose | bool | true | Swipe up to close lightbox |
| scroll | bool | false | Hide scrollbars if lightbox is displayed |
| draggable | bool | true | Use dragging and touch swiping |
| threshold | number | 20 | Touch and mouse dragging threshold (in px) |
var tobi = new Tobi({
// Options
})
tobi.open() // Opens the lightbox
tobi.open(2) // Opens the lightbox on slide 3 (first is 0)
tobi.next() // Shows the next slide in the lightbox
tobi.prev() // Shows the previous slide in the lightbox
tobi.close() // Closes the lightbox
// Adds an element dynamically
var newElement = document.querySelector('.new-image')
tobi.add(newElement)
Tobi has been tested in the following browsers (all the latest versions):
If you do anything interesting with this code, please let me know. I'd love to see it.
FAQs
security holding package
The npm package rqrauhvmra__tobi receives a total of 1 weekly downloads. As such, rqrauhvmra__tobi popularity was classified as not popular.
We found that rqrauhvmra__tobi demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.