Video/Iframe/Gallery/Inline Content Lightbox Library – Tobii

Category: Javascript , Modal & Popup , Recommended | August 31, 2021
Author:rqrauhvmra
Views Total:516 views
Official Page:Go to website
Last Update:August 31, 2021
License:MIT

Preview:

Video/Iframe/Gallery/Inline Content Lightbox Library – Tobii

Description:

Tobii is a feature-rich, responsive, accessible, mobile-friendly lightbox library that makes it possible to display any content type (HTML5/Youtube video, iframe content, inline HTML, and even image gallery) in a modal popup.

More Features:

  • Image captions.
  • Smart navigation controls.
  • Item counter.
  • Keyboard interactions.
  • Image loading indicator.
  • Swipe & click outside to close.
  • Auto play videos.

Install & Download:

# NPM
$ npm i @midzer/tobii

How to use it:

1. To get started, include the Tobii library’s files on the page.

<link href="dist/css/tobii.css" rel="stylesheet" />
<script src="dist/js/tobii.js"></script>
// OR as a module
import Tobii from './dist/tobii.modern.js';

2. Initialize the Tobii library and we’re ready to go.

const tobii = new Tobii();

3. Make an element to toggle a basic lightbox that loads content from an inline HTML element. Full HTML data attributes:

  • data-type: html, iframe, or youtube.
  • data-id: Youtube media id.
  • data-target: Target for “iframe” and “html” types.
  • data-group: Custom group.
  • data-width: Container width for iframe or youtube types.
  • data-height: Container height for iframe or youtube types.
  • data-controls: Whether the video player controls are displayed: 0 do not display and 1 display controls in the player.
  • data-allow: Allows to set allow attribute on iframes.
  • data-srcset: Allows to have Responsive image or retina images.
  • data-zoom: Allows to enable or disable zoom icon. Values: “true” or “false”
<button type="button" data-type="html" data-target="#modal" class="lightbox">
  Toggle
</button>
<div id="modal" class="modal">
  <div class="modal__inner">
    Modal Content Here
  </div>
</div>

4. Embed an iframe into the lightbox.

<button type="button" data-type="iframe" data-height="600" data-width="400" data-target="https://example.jpg" class="lightbox">
  Open Example.com
</button>

5. Embed a Youtube video into the lightbox.

<button type="button" data-type="youtube" data-id="VIDEO ID HERE" data-height="600" data-controls="1" class="lightbox">
  Play Youtube Video
</button>

6. Group your images using the data-group attribute and display them as an inline slider in the lightbox.

<a href="1.jpg" class="lightbox" data-group="gallery">
  <img src="1.jpg" alt="Alt" width="200">
</a>
<a href="2.jpg" class="lightbox" data-group="gallery">
  <img src="2.jpg" alt="Alt" width="200">
</a>
<a href="3.jpg" class="lightbox" data-group="gallery">
  <img src="3.jpg" alt="Alt" width="200">
</a>

7. Config the lightbox with the following options.

var tobii = new Tobii({

    // default selector
    selector: '.lightbox',

    // shows image captions
    captions: true,
    captionsSelector: 'img',
    captionAttribute: 'alt',
    captionText: null, // returns the caption text for the current element

    // 'auto' = auto hides navigation controls on mobile devices
    nav: 'auto',

    // custom navigation controls
    navText: [
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 18l-6-6 6-6"/></svg>',
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 6l6 6-6 6"/></svg>'
    ],
    navLabel: [
      'Previous image',
      'Next image'
    ],

    // shows close button
    close: true,
    closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12M6 18L18 6"/></svg>',
    closeLabel: 'Close lightbox',

    // image loading indicator
    loadingIndicatorLabel: 'Image loading',

    // shows image counter
    counter: true,
    
    // enables keyboard interactions
    keyboard: true,

    // shows a zoom image on the images
    zoom: true,
    zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 16v5h-5"/><path d="M8 21H3v-5"/><path d="M16 3h5v5"/><path d="M3 8V3h5"/></svg>',

    // click/tap outside to close the lightbox
    docClose: true,

    // allows to close the lightbox with swipe event
    swipeClose: true,

    // hides scrollbar when the lightbox is activated
    hideScrollbar: true,

    // enables drag and touch swipe events
    draggable: true,

    // touch and mouse dragging threshold in pixels
    threshold: 100,
    
    // auto plays videos
    autoplayVideo: false,

    // modal mode
    modal: false,

    // theme class
    theme: 'tobii--theme-default'
    
});

8. API methods.

// open a specific item
instance.open(index, callback);

// goto the next item
instance.next(callback);

// back to the prev item
instance.prev(callback);

// close the lightbox
instance.close(callback);

// add a new item to the lightbox
instance.add(element, callback);

// remove an item
instance.remove(element, callback);

// check if is open
instance.isOpen();

// get the current item index
instance.currentSlide();

// select a specific group
instance.selectGroup(value);

// select a slide
instance.select(index);

// return the current slide index
instance.slidesIndex();

// return the current number of slides
instance.slidesCount();

// get the current group
instance.currentGroup();

// reset the lightbox
instance.reset();

// destroy the lightbox
instance.destroy();

9. Events.

instance.on(eventName, listener);
instance.off(eventName, listener);
instance.on('open', function(){
  // do something
})
instance.on('close', function(){
  // do something
})
instance.on('next', function(){
  // do something
})
instance.on('previous', function(){
  // do something
})

Changelog:

v2.3.0 (08/31/2021)

  • Added close event
  • button, background style changes
  • Added ability to select HTML links using tab, ability to select text in HTML element
  • Added data-zoom attribute
  • ignore duplicates
  • Split into modules
  • proof that images with query parameters works fine
  • console error on multiple instances
  • lint update: allow for “font-weight: bold;”
  • lint update: allow for “color: #aabbcc”
  • bump dependencies

v2.2.0 (06/30/2021)

  • Vimeo support
  • better YouTube iframe support
  • close event
  • retina images support
  • events with data
  • styles for inline HTML
  • improvements for iframe
  • hide iframe until loaded
  • bugfixes

v2.1.0 (04/27/2021)

  • Rebuild

v0.2.6 (02/22/2021)

  • Move to ES6
  • Create extra module and UMD builds
  • Add captionText config to set a callback for custom caption elements
  • Add AVIF support

08/29/2020

  • Add theme option/ class, improve small things

You Might Be Interested In:


Leave a Reply