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

An accessible, simple and light-weight open source lightbox script with no dependencies.


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

Tobi

Version License Dependecies Support me on Ko-fi Amazon wishlist

An accessible, simple and light-weight open source lightbox script with no dependencies.

Play on CodePen

A picture of the lightbox

Table of contents

Features

  • No dependencies
  • Accessible:
    • ARIA roles
    • Keyboard navigation:
      • Prev / Next Keys: Navigate through items
      • ESCAPE Key: Close the lightbox
      • TAB Key: Focus elements within the lightbox, not outside
    • User preference media features:
      • prefers-reduced-motion media query
    • 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>

Play on CodePen

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
</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.

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>

YouTube

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.

Optional attributes

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.

Options

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

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

Play on CodePen

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.
navLabelstring["Previous", "Next"]ARIA label for screen readers.
closebooltrueDisplay close button.
closeTextstring"inline svg"Text or HTML for the close button.
closeLabelstring"Close"ARIA label for screen readers.
loadingIndicatorLabelstring"Image loading"ARIA label for screen readers.
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.
hideScrollbarbooltrueHide browser scrollbars if lightbox is displayed.
draggablebooltrueUse dragging and touch swiping.
thresholdnumber100Touch and mouse dragging threshold (in px).
autoplayVideoboolfalseVideos will automatically start playing as soon as they can do so without stopping to finish loading the data.

API

FunctionDescription
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.

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 srcset and picture

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.

Keywords

FAQs

Last updated on 30 Nov 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