Question

我目前正在使用flickity并添加了一个lightbox扩展程序，这里是我从（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
   }); 
 });

我使用bootstrap进行媒体查询，所以如果我只有一行，灯箱可以正常工作，但是有多行，我必须添加多个库，是否可以使用此代码执行此操作？

多个画廊与flickity灯箱

0 个答案: