ressource type-en-images, php js et css

web/themes/custom/eql/scripts/main.js

@@ -83,6 +83,7 @@ jQuery(function ($) {
   });
  
 
+
   
   
   ///// fusion views-type-slide de class identique ////////////
@@ -180,3 +181,79 @@ jQuery(function ($) {
 
   }
 });
+/////////////////diaporama ressource //////////
+document.addEventListener('DOMContentLoaded', function () {
+  // Attendre que les éléments HTML soient bien présents
+  const interval = setInterval(() => {
+    const mainImage = document.getElementById('mainImage');
+    const prevArrow = document.getElementById('prevArrow');
+    const nextArrow = document.getElementById('nextArrow');
+    const caption = document.getElementById('caption');
+    const thumbsContainer = document.getElementById('thumbnails');
+    const imagesInDom = document.querySelectorAll('.carousel-items .carousel-item img');
+
+    if (mainImage && prevArrow && nextArrow && caption && thumbsContainer && imagesInDom) {
+      clearInterval(interval); // Tous les éléments sont là, on lance le carrousel
+      initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer });
+    }
+  }, 100); // vérifie toutes les 100ms
+});
+function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer }) {
+  const images = [];
+  document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
+    images.push({
+      src: img.getAttribute('src'),
+      caption: img.getAttribute('alt') || 'Image sans légende'
+    });
+  });
+  console.log('Images chargées pour le carrousel :', images);
+
+  if (!images.length) return;
+
+  let currentIndex = 0;
+
+  function showImage(index) {
+    mainImage.src = images[index].src;
+    caption.textContent = images[index].caption;
+
+    const thumbnails = document.querySelectorAll('.thumbnails img');
+    thumbnails.forEach(img => img.classList.remove('active'));
+    if (thumbnails[index]) {
+      thumbnails[index].classList.add('active');
+    }
+  }
+
+  prevArrow.addEventListener('click', () => {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    showImage(currentIndex);
+  });
+
+  nextArrow.addEventListener('click', () => {
+    currentIndex = (currentIndex + 1) % images.length;
+    showImage(currentIndex);
+  });
+
+  images.forEach((img, index) => {
+    const thumb = document.createElement('img');
+    thumb.src = img.src;
+    thumb.alt = img.caption;
+    thumb.onclick = () => {
+      currentIndex = index;
+      showImage(index);
+    };
+    thumbsContainer.appendChild(thumb);
+  });
+
+  showImage(currentIndex);
+  const thumbPrev = document.getElementById('thumbPrev');
+  const thumbNext = document.getElementById('thumbNext');
+
+  thumbPrev.addEventListener('click', () => {
+    thumbsContainer.scrollBy({ left: -150, behavior: 'smooth' });
+  });
+
+  thumbNext.addEventListener('click', () => {
+    thumbsContainer.scrollBy({ left: 150, behavior: 'smooth' });
+  });
+
+}