Estoy usando un tema de Bootstrap y quería que la galería de imágenes en la página de visualización de imágenes del tema se cargara a través de AJAX. Las fotos vienen como JSON con AJAX, pero no pude mostrarlas en la página.
La parte relacionada con la galería de este tema del archivo JS original:
var productGallery = function () { var gallery = document.querySelectorAll('.product-gallery'); if (gallery.length) { var _loop8 = function _loop8(i) { var thumbnails = gallery[i].querySelectorAll('.product-gallery-thumblist-item'), previews = gallery[i].querySelectorAll('.product-gallery-preview-item'); for (var n = 0; n < thumbnails.length; n++) { thumbnails[n].addEventListener('click', changePreview); } // Changer preview function function changePreview(e) { e.preventDefault(); for (var _i3 = 0; _i3 < thumbnails.length; _i3++) { previews[_i3].classList.remove('active'); thumbnails[_i3].classList.remove('active'); } this.classList.add('active'); gallery[i].querySelector(this.getAttribute('href')).classList.add('active'); } }; for (var i = 0; i < gallery.length; i++) { _loop8(i); } } }();Datos del archivo JSON con Ajax:
some AJAX code.. if (slidePhotos.photos) { for (let x= 0; x< slidePhotos.photos.length; x++) { document.getElementById('gallery_photos_div').innerHTML += '<div class="product-gallery-preview-item" id="' + x+ '"><img src="' + slidePhotos.photos[x].url + '" alt=""></div>'; document.getElementById('gallery_thumbs_div').innerHTML += '<a class="product-gallery-thumblist-item" href="#' + x+ '"><img src="' + slidePhotos.photos[x].url + '"></a>'; } }Se genera el código HTML, pero lamentablemente las imágenes no cambian cuando hago clic en él.
Muestra JSON:
[ { "url":"https://example.com/image1.jpg", "url":"https://example.com/image2.jpg" } ]¿Puedes decirme dónde cometí un error?
Veo un par de problemas aquí:
div.product-gallery-preview-item a su contenedor de presentación de diapositivas, pero no agrega un .product-gallery .product-gallery-thumblist-item correspondiente. .product-gallery-thumblist-item . En su función productGallery , su controlador de click está vinculado a este último, no al primero. Querrá asegurarse de que esos elementos de miniatura de destino se agreguen, así como los de vista previa.productGallery se activa cuando la página/DOM se carga por primera vez para inicializar la presentación de diapositivas. Los controladores de eventos de click que controlan la funcionalidad de su presentación de diapositivas están vinculados únicamente a los elementos que están presentes cuando se ejecuta la función . Si no está ejecutando esta función repetidamente al agregar contenido a través de AJAX (espero que no lo esté, ya que esto vincularía los controladores de eventos duplicados a los elementos que ya están en la presentación de diapositivas), deberá asegurarse de que sus nuevos elementos estén preparados. para responder al click de la misma manera que lo son los existentes. Tienes un par de opciones aquí:productGallery para que se pueda invocar repetidamente con la misma presentación de diapositivas, por ejemplo: agregar :not(.slideshow-processed) al final de su .product-gallery-thumblist-item y .product-gallery-preview-item selectores y luego agregar la clase slideshow-processed a estos elementos después de vincular los controladores de eventos para que no se procesen nuevamente durante las invocaciones posteriores de productGallery .productGallery para usar la delegación de eventos (donde un elemento principal escucha un evento que ocurre en uno de sus elementos secundarios). Esto le permitiría vincular su controlador de eventos al contenedor .product-gallery solo una vez, y hacer que se active para cualquier par de vista previa/miniatura que se agregue a la presentación de diapositivas, sin tener que volver a invocar productGallery . Puede leer más sobre la delegación de eventos en https://javascript.info/event-delegation .Esperemos que esto te apunte en la dirección correcta. ¡Feliz codificación!