Estoy tratando de crear un control deslizante de borrado de fotos que se abre al hacer clic en una miniatura. Todo funciona, pero el primer clic en cualquier miniatura de la página abre la galería deslizante sin ninguna transición adecuada (debe usar la opción getThumbBoundsFn: https://photoswipe.com/documentation/options.html ), pero simplemente se desvanece. Debe haber una pequeña transición en cada clic.

Después de cerrar y hacer clic nuevamente, todo funciona como debería. Estoy usando la opción getThumbBoundsFn de photoswipe. El problema solo ocurre al hacer clic por primera vez.

Me pregunto si no debería agregar todo el código a la función de clic. Este es mi código JS:

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