Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
By Sarah Gooding - Apr 23, 2024
rqrauhvmra__tobi
Advanced tools
Package version was removed
This package version has been unpublished, mostly likely due to security reasons
Readme
Tobi
An accessible, simple and light-weight open source lightbox script with no dependencies.
Table of contents
Features
- No dependencies
- Accessible:
- ARIA roles
- Keyboard navigation:
Prev/NextKeys: Navigate through itemsESCAPEKey: Close the lightboxTABKey: Focus elements within the lightbox, not outside
- 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
- Iframe support
- Inline HTML support
Get Tobi
Download
CSS: css/tobi.min.css minified, or css/tobi.css un-minified
JavaScript: js/tobi.min.js minified, or js/tobi.js un-minified
Package managers
Tobi is also available on npm.
$ npm install rqrauhvmra__tobi --save
Usage
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()
Media types
Image
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>
Inline HTML
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.
Iframe
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>
In any case, the attribute data-type with the value iframe must be added. The iframe dimensions can be controlled by CSS.
Options
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 | 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 |
API
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 current slide index.
Browser support
Tobi has been tested in the following browsers (all the latest versions):
- Chrome
- Firefox
- Internet Explorer
- Edge
- Safari
To do
- Possibility to group
- Support for
srcsetandpicture
Contributing
- Report issues
- Open pull request with improvements
- Spread the word
License
Tobi is available under the MIT license. See the LICENSE file for more info.
Notes
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 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.
Last updated on 20 Sep 2018
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.
Related posts
Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
By Sarah Gooding - Apr 19, 2024
Research
Security News
npm Package for ReExt React Components Library Exfiltrates Git Credentials
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
By Sarah Gooding, Socket Research Team - Apr 18, 2024