Socket
Socket
Sign inDemoInstall

rqrauhvmra__tobi

Package Overview
Dependencies
0
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rqrauhvmra__tobi

A light-weight and open source lightbox script with no dependencies.


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

Tobi

Version License Dependecies

Simple lightbox script without dependencies.

Play on CodePen

.flex__*

Features

  • No dependencies
  • Simple and light-weight
  • Keyboard support: Prev/Next keys allows to navigate through items, close the lightbox with the escape key
  • Touch gestures: Drag/Swipe to navigate through items, close the lightbox with a vertical drag/swipe
  • Support for images, iframes and inline HTML

Install

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

npm: npm install rqrauhvmra__tobi --save

Usage

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>

Options

You can pass an object with custom options as an argument.

var tobi = new Tobi({
  captions: false
})

The following options are available:

PropertyTypeDefaultDescription
selectorstring".lightbox"All elements with this class triggers the lightbox.
captionsbooltrueDisplay captions, if available.
captionsSelector"self", "img""img"Set the element where the caption is. Set it to "self" for the a tag itself
captionAttributestring"alt"Get the caption from given attribute.
navbool, "auto""auto"Display navigation buttons. "auto" hides buttons on touch-enabled devices.
navTextstring["inline svg", "inline svg"]Text or HTML for the navigation buttons.
closebooltrueDisplay close button.
closeTextstring"inline svg"Text or HTML for the close button.
counterbooltrueDisplay current image index
keyboardbooltrueAllow keyboard navigation.
zoombooltrueDisplay zoom icon.
zoomTextstring"inline svg"Text or HTML for the zoom icon
docClosebooltrueCloses the lightbox when clicking outside
swipeClosebooltrueSwipe up to close lightbox
scrollboolfalseHide scrollbars if lightbox is displayed
draggablebooltrueUse dragging and touch swiping
thresholdnumber20Touch and mouse dragging threshold (in px)

API

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)

Browser support

Tobi has been tested in the following browsers (all the latest versions):

  • Firefox
  • Firefox on Android
  • Chrome
  • Chrome on Android
  • Safari
  • Internet Explorer
  • Edge

Missing stuff

  • Possibility to group

Contributing

  • Report issues
  • Open pull request with improvements
  • Spread the word

Notes

If you do anything interesting with this code, please let me know. I'd love to see it.

Keywords

FAQs

Last updated on 21 Aug 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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc