为什么我的灯箱读不了这个属性？

I created a photo gallery with lightgallery and cycle2 using together, cycle is a carousel plugin, lightgallery is a lightbox gallery.

我创建了一个与lightgallery和cycle2一起使用的照片库，cycle是一个carousel插件，lightgallery是一个灯箱库。

so when I click any image on carousel than it's image is opening on lightbox and I want to tell you everything works very well until you click any category on carousel.so I want to bother you about this problem

因此，当我点击旋转木马上的任何图像时，它的图像在灯箱上打开，我想告诉你一切正常，直到你点击carousel上的任何类别。所以我想打扰你这个问题

After you click any category the lightbox is not opening if you are click image on carousel and see error on console.

单击任何类别后，如果您在旋转木马上单击图像并且在控制台上看到错误，则灯箱不会打开。

plugin gives me this erros

插件给了我这个错误

lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:10 Uncaught TypeError: Cannot read property 's' of undefined
    at new c (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:10)
    at Function.<anonymous> (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at Function.each (jquery.min.js:2)
    at b.build (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at HTMLDivElement.<anonymous> (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)

for two weeks I'm trying to solve this problem

两个星期我试图解决这个问题

please click to demo

请点击演示

要么

$(document).ready(function() {
  options = {
    next: "#single-right",
    log: false,
    fx: "fade",
    caption: ".cycle-caption",
    captionTemplate: "{{title}}",
    pauseOnHover: true,
    pager: "#single-pager",
    pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}' width='70' height='70'>",
    prev: "#single-left",
    slides: "div[data-hidden='false']"
  }

  function generateSlider(opt) {
    $("#myCarousel").cycle(opt);
  }

  generateSlider(options);

  $('#myCarousel').lightGallery({
    selector: "div[data-hidden='false']",
    exThumbImage: "data-exthumbimage",
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    vimeoThumbSize: 'thumbnail_medium',
  });



  $("#filter li").on("click", function() {
    var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $(".item").attr("data-hidden", "false");
    } else {
      $(".item").attr("data-hidden", "true");
      $("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $("#myCarousel").cycle("destroy");
    options['pagerTemplate'] = "<img class='lazyload' data-src='{{children.0.src}}'  width='70' height='70'>"
    generateSlider(options);
    return false;
  });

});

.mySlideShow {
  width: 700px;
  position: relative;
}

.item img {
  cursor: pointer;
}

#single-pager img {
  margin: 3px;
  cursor: pointer;
  width: 60px;
  height: 60px;
}

#filter {
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 100;
}

#filter li {
  display: inline-block;
  background: rgba(0, 0, 0, .7);
  color: #FFF;
  cursor: pointer;
  padding: 12px;
}

.cycle-caption {
  position: absolute;
  bottom: 14%;
  left: 0;
  padding: 12px;
  background: rgba(0, 0, 0, .5);
  color: #FFF;
  text-align: center;
  width: 100%;
  z-index: 100;
}

div[data-hidden='true'] {
  display: none;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>

<div class="mySlideShow">
  <div id="myCarousel">
    <div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
    </div>
    <div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
    </div>


    <div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
    </div>

    <div id="single-pager">
    </div>
  </div>
  <ul id="filter">
    <li id="animals">Animals</li>
    <li id="sports">Sports</li>
    <li id="natural">Natural</li>
    <li id="show-all">All</li>
  </ul>
  <div class="cycle-caption"></div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0.1,lg-video@1.0.1,lg-autoplay@1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>

1 个解决方案

#1

When you filter your carousel items, you break the lightbox instance. So what you need to do is:

过滤轮播项目时，会破坏灯箱实例。所以你需要做的是：

Destroy the lightbox (if you don't, when you try to instantiate a new one it will recreate helper DOM elements needed for it to function, resulting in duplicate ID's and your lightbox will break). You need to call
销毁灯箱（如果不这样做，当你尝试实例化一个新灯箱时，它将重新创建它运行所需的辅助DOM元素，导致重复的ID并且你的灯箱会破坏）。你需要打电话

$('#myCarousel').data('lightGallery').destroy(true);

Without the true parameter, it's not properly destroyed, it's just closed (in case it's open).

没有真正的参数，它没有被正确销毁，它只是关闭（如果它是打开的）。

Filter the slider.
过滤滑块。
Create a new lightbox.
创建一个新的灯箱。

Working example: https://codepen.io/anon/pen/XRemwV

工作示例：https：//codepen.io/anon/pen/XRemwV

Doc ref: http://sachinchoolur.github.io/lightGallery/docs/api.html#methods

Doc ref：http：//sachinchoolur.github.io/lightGallery/docs/api.html#methods

#1