Responsive Video, Iframe, Photo Gallery & Inline Content Lightbox Library | Tobii

More Features:

• Image captions.
• Smart navigation controls.
• Item counter.
• Keyboard interactions.
• Image loading indicator.
• Swipe & click on the exterior to close.
• Autoplay movies.

How to make use of it:

1. To get started, including the Tobii library’s record data on the web page.

<link href="dist/css/tobii.css" rel="stylesheet">
<script src="dist/js/tobii.js"></script>

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

var tobii = new Tobii();

3. Make a component to toggle a fundamental lightbox that loads content material from an inline HTML component.

<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-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" class="lightbox">
  Play Youtube Video
</button>

6. Group your photos utilizing the data-group attribute and show them as an inline slider within the lightbox.

<a href=" " class="lightbox" data-group="gallery">
  // Image Add Here
</a>
<a href=" " class="lightbox" data-group="gallery">
  // Image Add Here
</a>
<a href=" " class="lightbox" data-group="gallery">
  // Image Add Here
</a>

7. Config the lightbox with the next options.

var tobii = new Tobii({

    // default selector
    selector: '.lightbox',

    // shows image captions
    captions: true,
    captionsSelector: 'img',
    captionAttribute: 'alt',

    // '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"></path></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"></path></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"></path></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><path d="M8 21H3v-5"></path><path d="M16 3h5v5"></path><path d="M3 8V3h5"></path></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 strategies.

// 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();

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

// destroy the lightbox
instance.destroy();

Video, Iframe, Gallery, Inline Content Lightbox Library, Responsive Video Modal, Tobii GitHub

See Demo And Download