Multiple galleries with flickity lightbox

Question

I'm currently using flickity and added a lightbox extension to it, here's where I got it from (vanilla JS): https://codepen.io/jimahyland/pen/GZGrEa

var lightbox = {

config : {
gallery              : '.gallery',          // class of gallery
galleryImage         : '.image',            // class of image within gallery
lightboxID           : '#lightbox',         // id of lighbox to be created
lightboxEnabledClass : 'lightbox-enabled',  // class of body when lighbox is enabled
buttonsExit          : true,                // include exit div?
buttonsNavigation    : true,                // include navigation divs?
containImgMargin     : 0                    // margin top and bottom to contain img
},

init : function(config) {

// merge config defaults with init config
$.extend(lightbox.config, config);

// on click
$(lightbox.config.gallery).find('a').on('click', function(event) {
  event.preventDefault();
  lightbox.createLightbox($(this));
});

},

// create lightbox
createLightbox : function($element) {

// add body class
$('body').addClass(lightbox.config.lightboxEnabledClass);

// remove lightbox if exists
if ($(lightbox.config.lightboxID).length) { 
  $(lightbox.config.lightboxID).remove(); 
}

// add new lightbox
$('body').append('<div id="' + lightbox.config.lightboxID.substring(1) + '"><div class="slider"></div></div>');

// add exit div if required
if (lightbox.config.buttonsExit) {
  $(lightbox.config.lightboxID).append('<div class="exit"></div>');
}

// add navigation divs if required
if (lightbox.config.buttonsNavigation) {
  $(lightbox.config.lightboxID).append('<div class="prev"></div><div class="next"></div>');
}

// now populate lightbox
lightbox.populateLightbox($element);

},

// populate lightbox
populateLightbox : function($element) {

var thisgalleryImage = $element.closest(lightbox.config.galleryImage);
var thisIndex = thisgalleryImage.index();

// add slides
$(lightbox.config.gallery).children(lightbox.config.galleryImage).each(function() {
  $('#lightbox .slider').append('<div class="slide"><div class="frame"><div class="valign"><img src="' + $(this).find('a').attr('href') + '"></div></div></div>');
});

// now initalise flickity
lightbox.initFlickity(thisIndex);

},

// initalise flickity
initFlickity : function(thisIndex) {

$(lightbox.config.lightboxID).find('.slider').flickity({ // more options: https://flickity.metafizzy.co
  cellAlign: 'left',
  resize: true,
  wrapAround: true,
  prevNextButtons: false,
  pageDots: false,
  initialIndex: thisIndex
});

// make sure image isn't too tall
lightbox.containImg();

// on window resize make sure image isn't too tall
$(window).on('resize', function() {
  lightbox.containImg();
});

// buttons
var $slider = $(lightbox.config.lightboxID).find('.slider').flickity();

$(lightbox.config.lightboxID).find('.exit').on('click', function() {
  $('body').removeClass('lightbox-enabled');
  setTimeout(function() {
    $slider.flickity('destroy');
    $(lightbox.config.lightboxID).remove();
  }, 0);
});

$(lightbox.config.lightboxID).find('.prev').on('click', function() {
  $slider.flickity('previous');
});

$(lightbox.config.lightboxID).find('.next').on('click', function() {
  $slider.flickity('next');
});

// keyboard
$(document).keyup(function(event) {
  if ($('body').hasClass('lightbox-enabled')) {
    switch (event.keyCode) {
      case 27:
        $(lightbox.config.lightboxID).find('.exit').click();
        break;
      case 37:
        $(lightbox.config.lightboxID).find('.prev').click();
        break;
      case 39:
        $(lightbox.config.lightboxID).find('.next').click();
        break;
    }
  }
});

},

// contain lightbox images
containImg : function() {
  $(lightbox.config.lightboxID).find('img').css('maxHeight',   ($(document).height() - lightbox.config.containImgMargin));
}

};

// initalise lightbox
$(document).ready(function() { 
lightbox.init({
  containImgMargin : 100
   }); 
 });

I use bootstrap for the media queries so if I only have one row the lightbox works as it should but with more than one row I'd have to add more than one gallery, is it possible to do it with this code?

Multiple galleries with flickity lightbox

0 Answers0