Skip to content
Stepan Bolotnikov edited this page Jun 19, 2017 · 4 revisions

Adding lightbox support for slider

Slider doesn't support opening image with lightbox. Adding below code to your site will add support for this.

NOTES:

  • Supports multiple sliders on same page
  • Don't run this code in editmode because it already has lightbox attached
<script>
  var galleryEls = document.querySelectorAll('.edys-gallery-slider[data-gallery-id]');

  galleryEls.forEach(function(galleryEl) {
      var photoEls = Array.prototype.slice.call(galleryEl.querySelectorAll('[data-gallery-photo-id]'), 0);
      var photos = photoEls.map(function(photo) {
        return {
          id: parseInt(photo.getAttribute('data-gallery-photo-id'), 10),
          sizes: JSON.parse(photo.getAttribute('data-sizes')),
          title: photo.getAttribute('data-title')
        };
      });

      photoEls.forEach(function(el) {
        el.addEventListener('click', function() {
          el.dispatchEvent(new CustomEvent('edicy:photo:show', {
            bubbles: true,
            detail: {
              gallery_id: parseInt(galleryEl.getAttribute('data-gallery-id'), 10),
              gallerySettings: JSON.parse(galleryEl.getAttribute('data-settings')),
              photo_id: parseInt(el.getAttribute('data-gallery-photo-id'), 10),
              photos: photos,
              url: null
            }
          }));
        });
      });
  });
</script>

Clone this wiki locally