Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
rqrauhvmra__tobi
Advanced tools
An accessible, simple and light-weight open source lightbox script with no dependencies.
Weekly downloads
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 outsideprefers-reduced-motion
media queryCSS: 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
</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
</button>
In any case, the attribute data-type
with the value html
must be added.
For an iframe, 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>
For an YouTube video, create a link with the class name lightbox
and a data-id
attribute with the YouTube video ID:
<a href="#" data-type="youtube" data-id="KU2sSZ_90PY" class="lightbox">
Open YouTube video
</a>
or a button with the class name lightbox
and a data-id
attribute with the YouTube video ID:
<button type="button" data-type="youtube" data-id="KU2sSZ_90PY" class="lightbox">
Open YouTube video
</button>
In any case, the attribute data-type
with the value youtube
must be added.
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 to use a external library for responsive iframes.
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. |
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 | 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). |
autoplayVideo | bool | false | Videos will automatically start playing as soon as they can do so without stopping to finish loading the data. |
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). |
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):
srcset
and picture
Tobi is available under the MIT license. See the LICENSE file for more info.
FAQs
security holding package
The npm package rqrauhvmra__tobi receives a total of 0 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.