I'm trying to create a photoswipe slider that opens on click of a thumbnail. It all works but the first click on any thumbnail on the page opens the slider gallery without any proper transition (it should use the getThumbBoundsFn option: https://photoswipe.com/documentation/options.html), but it just fades in. There should be a little transition on each click.

After closing and clicking again everything works like it should. I am using the getThumbBoundsFn option of photoswipe. The problem only occures on first clicking.

I wonder if I shouldn't add all the code to the click function? This is my JS code:

var pswpElement = document.querySelectorAll(".pswp")[0];

// build items array

let imgOnPage = document.querySelectorAll("[data-src]");
let items = [];

imgOnPage.forEach((singleImg) => {
  items.push({
    src: singleImg.dataset.src,
    w: singleImg.dataset.large_image_width,
    h: singleImg.dataset.large_image_height,
  });
});

imgOnPage.forEach((item, index) => {
  // Initializes and opens PhotoSwipe

  item.addEventListener("click", (event) => {
    event.preventDefault();
    // define options (if needed)
    var options = {
      index: index,
      bgOpacity: 1,
      barsSize: { top: 0, bottom: 0 },
      closeEl: true,
      captionEl: false,
      fullscreenEl: false,
      zoomEl: false,
      shareEl: false,
      counterEl: false,
      preloaderEl: false,
      showHideOpacity: true,
      showAnimationDuration: 333,
      loop: false,
      clickToCloseNonZoomable: false,
      preload: [2, 3],
      getThumbBoundsFn: function (index) {
        // find thumbnail element
        var thumbnail = document.querySelectorAll("[data-src]")[index];

        // get window scroll Y
        var pageYScroll =
          window.pageYOffset || document.documentElement.scrollTop;
        // optionally get horizontal scroll

        // get position of element relative to viewport
        var rect = thumbnail.getBoundingClientRect();

        // w = width
        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };

        // Good guide on how to get element coordinates:
        // http://javascript.info/tutorial/coordinates
      },
    };

    var gallery = new PhotoSwipe(
      pswpElement,
      PhotoSwipeUI_Default,
      items,
      options
    );

    gallery.init();
  });
});