De acuerdo con los documentos de la galería de luz, puede usar el evento lgAfterOpen para ejecutar el código una vez que se abre la galería. Sin embargo, lightgallery hace que esto sea un poco difícil ya que no puede acceder a la imagen en la que se hizo clic desde este evento, pero puede acceder desde el evento lgBeforeOpen . Con esto en mente, lo lograría haciendo dos cosas.

En primer lugar, agregue el tamaño como atributo de datos de cada imagen:

 <img src="https://studio.website.nl/'.$getphotos['preview'].'" data-size="'.$size.'"/>

En segundo lugar, agregue las siguientes funciones al inicializar lightgallery:

 // example gallery definition const lg = document.getElementById('custom-events-demo'); // add the following functions lg.addEventListener('lgBeforeOpen', (event) => { //add datasize property to target so it can be accessed in the afterOpen function event.target.dataset.size = event.explicitOriginalTarget.dataset.size; }); lg.addEventListener('lgAfterOpen', (event) => { // get size from data attribute var size = event.target.dataset.size; // get the .lg-img-wrap div to append size to var imgWrap = document.querySelector(".lg-container.lg-show .lg-img-wrap"); // create and append span var sizeSpan = document.createElement("span"); sizeSpan.classList.add("sizelabel"); sizeSpan.innerHTML = size; imgWrap.appendChild(sizeSpan); }); //initialise lightgallery lightGallery(lg);

Es posible que esté utilizando una versión diferente de lightgallery, pero cuando probé esto, el .lg-img-wrap era un elemento de picture , no un div , por lo que reemplacé la última línea de la función de escucha de eventos con lo siguiente para obtener el tamaño a mostrar:

 imgWrap.parentElement.appendChild(sizeSpan);

Es posible que necesite un poco de CSS adicional para colocar el rango de tamaño como desee, pero solo para que se muestre todo lo que necesita es:

 .sizelabel { position: relative; }

Nota: no creo que esto funcione si navega a una imagen diferente desde lightgallery, ya que no actualizará el tamaño y, de hecho, es posible que el tamaño se elimine. Para solucionar esto, probablemente necesite hacer algo usando el evento lgAfterSlide y el índice de la imagen, pero de su captura de pantalla parece que no espera que el usuario se desplace por las imágenes dentro de lightgallery de todos modos, por lo que esto puede no ser un problema. .