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 simple lightbox script without dependencies.


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

Tobi

Simple lightbox script without dependencies.

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 Tobi();. The HTML code may look like this:

<a href="path/to/image.jpg" class="lightbox" title="I am a caption">
  <img src="path/to/thumbnail.jpg" alt="">
</a>

Options

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

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""self"Set the element where the caption is. Set it to "self" for the a tag itself
captionAttributestring"title"Get the caption from given attribute.
navbool, "auto""auto"Display navigation buttons. "auto" hides buttons on touch-enabled devices.
navTextstring["&lsaquo;", "&rsaquo;"]Text or HTML for the navigation buttons.
closebooltrueDisplay close button.
closeTextstring"&times;"Text or HTML for the close button.
counterbooltrueDisplay current image index
keyboardbooltrueAllow keyboard navigation.
zoombooltrueDisplay zoom icon.
zoomTextstring"&plus;"Text or HTML for the zoom icon
docCloseboolfalseCloses 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)

Missing stuff

  • Possibility to group images
  • Better dragging / swiping

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.

PayPal

Keywords

FAQs

Last updated on 22 Nov 2017

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