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
A light-weight and open source lightbox script with no dependencies.
Weekly downloads
Readme
Simple lightbox script without dependencies.
CSS: css/tobi.min.css
minified, or css/tobi.css
un-minified
JavaScript: js/tobi.min.js
minified, or js/tobi.js
un-minified
npm: npm install rqrauhvmra__tobi --save
Initialize the script by running:
var tobi = new Tobi()
The HTML code may look like this:
<a href="path/to/image.jpg" class="lightbox">
<img src="path/to/thumbnail.jpg" alt="I am a caption">
</a>
or
<a href="path/to/image.jpg" class="lightbox">
Open image
</a>
For inline HTML the HTML code may look like this:
<a href="#" data-type="html" data-target="#selector" class="lightbox">
Open HTML content / video or something else
</a>
<div id="selector">
// ...
</div>
For iframes the HTML code may look like this:
<a href="https://www.wikipedia.org/" data-type="iframe" class="lightbox">
Open Wikipedia
</a>
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. |
close | bool | true | Display close button. |
closeText | string | "inline svg" | Text or HTML for the close button. |
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(2) // Opens the lightbox on image 3 (first is 0)
tobi.next() // Shows the next image in the lightbox
tobi.prev() // Shows the previous image 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 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.