Touch-enabled Any Content Lightbox In Vanilla JavaScript – Tobi

Tobi is a simple-to-use JavaScript lightbox plugin that supports any content types: images, iframes, videos, HTML elements, etc.

Lightweight, accessible, and mobile-friendly. Also can be used as a gallery lightbox where the users are able to switch between lightbox content with drag, touch events or arrow keys.

How to use it:

Insert the Tobi’s JavaScript and Stylesheet into the document.

<link href="css/tobi.min.css" rel="stylesheet">
<script src="js/tobi.min.js"></script>

Add the class ‘lightbox’ to trigger elements as these:

<a href="1.jpg" class="lightbox">
  Image Lightbox
</a>
<a href="https://www.wikipedia.org/" data-type="iframe" class="lightbox">
  Iframe Lightbox
</a>
<a href="#" data-type="html" data-target="#el" class="lightbox">
  HTML Content Lightbox
</a>
<div id="el">
  Lightbox content here
</div>

Initialize the Tobi plugin and done.

var tobi = new Tobi();

Supported image formats: png, jpg, tiff, tif, gif, bmp, webp, svg, ico.  You can add new type to support something new.

image: {
  checkSupport: function (element) {
    return (element.href.match(/\.(png|jpg|tiff|tif|gif|bmp|webp|svg|ico)$/) != null)
  },
  ...
}

Available configuration options with default values.

var tobi = new Tobi({
    // default selector
    selector: '.lightbox',
    // shows captions
    captions: true,
    captionsSelector: 'img',
    captionAttribute: 'alt',
    // shows navigation
    nav: 'auto',
    navText: ['<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6" /></svg>', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg>'],
    // shows close icon
    close: true,
    closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>',
    // shows counter
    counter: true,
    // keyboard interactions
    keyboard: true,
    // shows zoom icon
    zoom: true,
    zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>',
    // click outside to close
    docClose: true,
    // swipe up to close
    swipeClose: true,
    // hides scrollbar when activated
    scroll: false,
    // is draggable?
    draggable: true,
    // Touch and mouse dragging threshold in pixels
    threshold: 20
    
});

API methods.

// open the second element
tobi.open(1);
// goto next
tobi.next();
// back to previous
tobi.prev()
// close
tobi.close()

Add new items to the gallery.

var newItem = document.querySelector('.new-image')
tobi.add(newItem)

Changelog:

12/02/2018

• `video` removed from the ignoring elements while dragging / swiping

09/24/2018

• Improvement