Question

我在WP主题中实现了Featherlight的Lightbox。here's the Github page for anybody interested看起来像一个非常漂亮的灯箱吗？（如果你们有人建议其他人，请告诉我。

我排队了所有的css＆amp; js文件很好地在我的functions.php文件中，它的工作原理。在文档中声明我可以通过在我的theme.js中添加它来创建画廊（例如）：

$('a.gallery').featherlightGallery({
  gallery: {
    previous: '«',
    next: '»',
    fadeIn: 300
  },
  openSpeed: 300
});

这应该意味着，具有班级a的网页上的每个gallery都会合并到一个可点击的灯箱库中，很酷！但是当我这样做时，我的猫头鹰旋转木马也在我的主题中打破I embedded this beautiful slider ，并希望将此滑块与灯箱结合使用！

到目前为止我发现了什么：

如果上面的代码未包含在我的js文件中，则Owl轮播分配了以下类：owl-carousel owl-theme owl-responsive-1199 owl-loaded请注意owl-loaded
当我的js文件中包含上面的代码时，owl轮播只有owl-carousel类，这意味着它是隐藏的，而不是已加载。它存在于我的DOM中，但由于缺少类而没有出现。

我不知道是什么造成了这个以及还有什么可以告诉你们。我可以理解你有更多问题，所以请问我这样可以给你更多信息。

谢谢！

Answer 1

因此，如果您要在owl滑块包含的图像上初始化featherlight插件，我认为问题将出现在时机上。

查看this pen

$(document).ready(function(){

  var carousel = $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
  });

  $('a.gallery').featherlightGallery({
    gallery: {
      previous: '«',
      next: '»',
      fadeIn: 300
    },
    openSpeed: 300
  });  

});

在笔上我已经加载了owl-carousel.min.js，feather.min.js和feather.gallery.min.js，因为它说＆＃34; Gallery只是这个插件的一个插件＆＃34; （呵呵，插件）..

所以你步骤：

确保您已加载所有资产
检查您的js是否可以找到.gallery类链接
如果没有，请修复它。
根据您的需求进行定制。

Featherlight Lightbox JS问题

1 个答案: