Question

当Slick轮播中有多个图像时，我在关闭Photoswipe后遇到似乎随机复制的问题。在视觉上，效果是Photoswipe关闭（没有任何动画消失），然后页面的右侧再次变为黑色，在Photoswipe中可见的最后一张照片可见，然后黑色背景淡化为透明但似乎仍然存在（它可以防止点击任何按钮。）

如果相关，则Photoswipe开放动画也不会像演示一样 - 它不会从缩略图放大，它只是从页面中心淡入

问题发生后页面的图像：https://i.imgur.com/a4XEMxU.png

以下是我一起使用Slick和Photoswipe的实现：

  var carousel = $('#sc');
  var pswpImages = [];
  var options = {
    history: false
  };
  var count = 0;
  for (var fn in data.images) {
    var pieces = fn.split('.');
    var fullsize = meta_data['media'] + fn;
    var thumbnail = meta_data['cache'] + pieces[0] + '_m.' + pieces[1];
    carousel.append('<div><img src="' + thumbnail + '" class="sc" data-id="' + count + '"></div>');
    count += 1;
    $('.sc').each(function () {
      $(this).on('click', function () {
        options.index = $(this).data('id');
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpImages, options);
        gallery.init();
      })
    });
    pswpImages.push({
      src: fullsize,
      msrc: thumbnail,
      w: data.images[fn]['x'],
      h: data.images[fn]['y']
    });
  }
  // TODO: When closing gallery, get image number, and slick.GoTo that slide
  carousel.slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    variableWidth: true,
    centerMode: true
  });

Answer 1

你能提供一个小提琴吗？

我怀疑 $（＆＃39; .sc＆＃39;）。每个（function（）都需要在for循环之外，否则你会为每个img创建一个on click事件以前由for循环创建。

第一次迭代：

在1 img

第二次迭代：

在第一个和第二个img上创建第二个div，.each（..on（＆＃39;点击＆＃39;））

..等等。

因此，最后：单击图像将启动PhotoSwipe的多个实例，但仅当有超过1个图像时 - 就像您观察到的那样。第一次迭代仍然没问题。

一个简单的修复可能是在.on（）之前调用.off（），如：

...
    $('.sc').each(function () {
      $(this).off().on('click', function () {
        options.index = $(this).data('id');
...

在此实现中，Photoswipe没有正确关闭[与Slick Carousel]

1 个答案: