Photoswipe does not close properly in this implementation [with Slick Carousel]

Question

I'm experiencing a problem that seems to be reproduced randomly after closing Photoswipe when there is more than one image in the Slick carousel. Visually, the effect is that Photoswipe closes (disappears without any animation), then the right side of the page changes again to black with last photo viewed in Photoswipe visible, then the black background fades to transparent but seems to be still there (it prevents any buttons from being clicked).

In case it's relevant, the Photoswipe open animation don't behave like the demos either - it doesn't zoom in from the thumbnail, it just simply fades in from the center of the page.

Image of the page after problem occurs: https://i.imgur.com/a4XEMxU.png

Here is my implementation using Slick and Photoswipe together:

  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

Could you provide a fiddle?

I suspect the $('.sc').each(function () needs to be outside the for loop, otherwise you are creating an on click event for every img previously created by the for loop.

1st iteration:

• create 1 div, .each( ..on('click')) on that 1 img

2nd iteration:

• create 2nd div, .each( ..on('click')) on the first AND the second img

..and so on.

So, in the end: clicking an image will start multiple instances of PhotoSwipe, but only if there are more than 1 images - just like you observed. The first iteration ist still fine.

A simple fix could be to call .off() before .on(), like:

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