THEMETRIAL

Multi-purpose Lightbox Gallery With JavaScript – Ensemble Lightbox

Author:loltgt
Views Total:0 views
Official Page:Go to website
Last Update:June 10, 2021
License:MIT

Preview:

Multi-purpose Lightbox Gallery With JavaScript – Ensemble Lightbox

Description:

Ensemble Lightbox is a responsive, feature-rich lightbox gallery built using plain JavaScript, with zero dependencies.

Features:

  • Supports any content types: image, text, iframe, video, pdf, etc.
  • Supports modern image formats: webp and avif.
  • Supports dynamic content creation.

How to use it:

1. To get started, include the Ensemble Lightbox’s JavaScript and Stylesheet on the page.

<link rel=”stylesheet” href=”dist/css/ensemble-lightbox.min.css” />
<script src=”dist/js/ensemble-lightbox.min.js”></script>

2. Create a lightbox gallery from elements within the document.

<div class="example">
  <a href="https://www.cssscript.com/1.jpg">
    <img src="https://www.cssscript.com/1.jpg" alt="Image Caption" />
  </a>
  <a href="iframe.html" data-caption="iframe">
    <img src="iframe.jpg" alt="Image Caption" />
  </a>
  <a href="pdf.pdf" data-caption="pdf">
    <img src="pdf.jpg" alt="Image Caption" />
  </a>
  // ...
</div>
const lightbox_example = document.querySelectorAll('.example');
for (const lightbox_group of lightbox_example) {
  var lightbox_options = { selector: 'a' };
  if (lightbox_group === lightbox_example[1]) {
    lightbox_options.infinite = false;
  }
  const lightbox = new ensemble.Lightbox(lightbox_group, lightbox_options);
  for (const a of lightbox_group.querySelectorAll('a')) {
    a.addEventListener('click', lightbox.open, true);
  }
}

3. Create a lightbox gallery from elements defined in a JS object.

const lightbox_contents = [
  {
    type: 'element',
    node: (function() { var el = document.createElement('div'); el.innerText = 'Test for a custom element.'; return el; }())
  },
  {
    type: 'video',
    loop: true,
    poster: 'video-test-card.png',
    sources: [
      {
        type: 'video/mp4',
        src: 'video-test-card.mp4'
      },
      {
        type: 'video/webm',
        src: 'video-test-card.webm'
      }
    ]
  },
  {
    type: 'video',
    src: 'https://www.youtube.com/embed/mN0zPOpADL4',
    caption: 'Agent 327: Operation Barbershopnnfrom Blender Studio',
    allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
    allowfullscreen: true //TODO FIX
  },
  {
    type: 'video',
    src: 'https://player.vimeo.com/video/325910798',
    caption: 'Spring - Blender Open Moviennfrom Blender Studio',
    allow: 'autoplay; fullscreen; picture-in-picture',
    allowfullscreen: true //TODO FIX
  },
  {
    type: 'audio',
    src: 'https://open.spotify.com/embed/album/54Awn36ryf55PkZyOR4iwQ',
    allowtransparency: true, //TODO FIX
    allow: 'encrypted-media'
  },
  {
    type: 'iframe',
    src: 'https://docs.google.com/forms/d/e/1FAIpQLSeI8_vYyaJgM7SJM4Y9AWfLq-tglWZh6yt7bEXEOJr_L-hV1A/viewform?formkey=dGx0b1ZrTnoyZDgtYXItMWVBdVlQQWc6MQ',
    height: '100%' //TODO FIX
  },
  {
    type: 'audio',
    src: 'audio-test.wav',
    autoplay: true
  }
  // ...
];
const lightbox = new ensemble.Lightbox({ 
      contents: lightbox_contents 
});

4. All default options.

const lightbox = new ensemble.Lightbox({ 
      className: ['modal', 'modal-lightbox'],
      selector: '',
      contents: null,
      navigation: true,
      captioned: true,
      infinite: true,
      autoDiscover: true,
      autoHide: 'navigation', // "navigation" or "captions"
      overlayed: false,
      checkOrigin: true,
      prev: {
        onclick: this.prev,
        innerText: 'u003C',
        ariaLabel: 'Previous'
      },
      next: {
        onclick: this.next,
        innerText: 'u003E',
        ariaLabel: 'Next'
      },
      onStep: function () {},
      onSlide: function () {},
      onCaption: function () {}
});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.