Question

我创建了一个照片库，lightgallery和cycle2一起使用，循环是旋转木马插件，lightgallery是一个灯箱库。

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

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

插件给了我这个错误

var oldBeacons: [CLBeacon] = []

func locationManager(_ manager: CLLocationManager, didRangeBeacons beacons: [CLBeacon], in region: CLBeaconRegion) {
  for beacon in beacons {
    for oldBeacon in oldBeacons {
      if beacon.minor != oldBeacon.minor, beacon.major != oldBeacon.major {
        print("New Beacon")
      } else {
        print("Old Beacon")
      }
    }
  }
  oldBeacons = beacons
}

两周我试图解决这个问题

please click to demo

或

＆＃13;

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)

＆＃13;

$(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;
  });

});

＆＃13;

.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;
}

＆＃13;

Answer 1

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

销毁灯箱（如果你没有，当你试图实例化一个新灯箱时，它将重新创建它运行所需的辅助DOM元素，导致重复的ID并且你的灯箱会破坏）。你需要致电

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

如果没有true参数，它没有被正确销毁，它就会被关闭（如果它已经打开）。

过滤滑块。
制作新的灯箱。

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

文件编号：http://sachinchoolur.github.io/lightGallery/docs/api.html#methods

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

1 个答案: