carroussel thumbnial vertical droite

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5838,12 +5838,12 @@ svg.ext {
   margin-top: 5rem;
   padding: 0;
   order: 7;
-  width: 80%;
+  width: 85%;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
   display: grid;
-  grid-template-columns: 1fr 10fr;
-  gap: 1.5rem;
+  grid-template-columns: 10fr 1fr;
+  gap: 4rem;
   justify-content: center;
   margin: auto;
 }
@@ -5863,6 +5863,7 @@ svg.ext {
   height: auto;
   object-fit: contain;
   max-height: 550px;
+  border: none;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption {
   margin-top: 1rem;
@@ -5872,7 +5873,6 @@ svg.ext {
   color: #444;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow {
-  display: none;
   font-size: 2rem;
   color: #333;
   background: none;
@@ -5901,14 +5901,15 @@ svg.ext {
   grid-row: 2;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper {
-  grid-column: 1;
+  grid-column: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-height: 70vh;
+  max-height: 65vh;
   grid-row: 1/span 2;
-  top: -30px;
+  top: -35px;
   position: relative;
+  overflow: hidden;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
   cursor: pointer;
@@ -5918,27 +5919,43 @@ svg.ext {
   border-radius: 50%;
   user-select: none;
   z-index: 2;
+  position: relative;
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.up {
+  transform: rotate(90deg);
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.down {
+  transform: rotate(90deg);
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
   overflow-y: auto;
   max-height: 100%;
   scroll-behavior: smooth;
+  position: relative;
+  z-index: 0;
+  padding: 5px 0;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar {
   display: none;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img {
-  width: 60px;
+  width: 80px;
   height: 60px;
   object-fit: contain;
   border: 2px solid transparent;
   cursor: pointer;
+  opacity: 0.7;
+  transition: transform 0.3s ease, opacity 0.3s ease;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active {
-  border-color: #00aaff;
+  transform: scale(1.3);
+  margin-top: 0.8rem;
+  margin-bottom: 0.8rem;
+  opacity: 1;
+  z-index: 1;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;

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

@@ -210,7 +210,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
   document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
     images.push({
       src: img.getAttribute('src'),
-      caption: img.getAttribute('alt') || 'Image sans légende'
+      caption: img.getAttribute('alt') || ''
     });
   });
 
@@ -218,6 +218,18 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
 
   let currentIndex = 0;
 
+  function scrollThumbnailToCenter(index) {
+    const thumbnails = document.querySelectorAll('.thumbnails img');
+    const activeThumb = thumbnails[index];
+    if (activeThumb && thumbsContainer) {
+      const containerHeight = thumbsContainer.clientHeight;
+      const thumbOffsetTop = activeThumb.offsetTop;
+      const thumbHeight = activeThumb.offsetHeight;
+      const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
+      thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+    }
+  }
+
   function showImage(index) {
     mainImage.src = images[index].src;
     caption.textContent = images[index].caption;
@@ -226,7 +238,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
     thumbnails.forEach(img => img.classList.remove('active'));
     if (thumbnails[index]) {
       thumbnails[index].classList.add('active');
-      // thumbnails[index].scrollIntoView({ block: 'center', behavior: 'smooth' });
+      scrollThumbnailToCenter(index); // 👈 centrage de la miniature active
     }
   }
 
@@ -274,6 +286,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
     }
   });
 }
+
     
 /////////////////end diaporama ressource //////////
 

web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss

@@ -15,12 +15,12 @@
         margin-top: 5rem;
         padding: 0;
         order: 7;
-        width: 80%;
+        width: 85%;
         .carousel {
           display: grid;
           // flex-direction: row;
-          grid-template-columns: 1fr 10fr;
-          gap: 1.5rem;
+          grid-template-columns: 10fr 1fr;
+          gap: 4rem;
           // align-items: flex-start;
           justify-content: center;
           margin: auto;
@@ -41,6 +41,7 @@
               height: auto;
               object-fit: contain;
               max-height: 550px;
+              border: none;
             }
           
             .caption {
@@ -53,7 +54,7 @@
           }
           
           .arrow {
-            display: none;
+            // display: none;
             font-size: 2rem;
             color: #333;
             background: none;
@@ -87,14 +88,38 @@
               grid-row: 2;
             }
             .thumbnails-wrapper {
-              grid-column: 1;
+              grid-column: 2;
               display: flex;
               flex-direction: column;
               align-items: center;
-              max-height: 70vh;
-              grid-row: 1 /span 2;
-              top: -30px;
+              max-height: 65vh;
+              grid-row: 1 / span 2;
+              top: -35px;
               position: relative;
+              overflow: hidden;
+            
+              // Dégradé haut
+              // &::before,
+              // &::after {
+              //   content: "";
+              //   position: absolute;
+              //   left: 0;
+              //   right: 0;
+              //   height: 50px;
+              //   z-index: 1;
+              //   pointer-events: none;
+              // }
+            
+              // &::before {
+              //   top: 0;
+              //   background: linear-gradient(to bottom, white, transparent);
+              // }
+            
+              // &::after {
+              //   bottom: 0;
+              //   background: linear-gradient(to top, white, transparent);
+              // }
+            
               .thumb-arrow {
                 cursor: pointer;
                 padding: 5px 10px;
@@ -103,89 +128,53 @@
                 border-radius: 50%;
                 user-select: none;
                 z-index: 2;
-                // font-weight: bold;
+                position: relative;
+            
+                &.up {
+                  transform: rotate(90deg);
+                }
+            
+                &.down {
+                  transform: rotate(90deg);
+                }
               }
             
               .thumbnails {
                 display: flex;
                 flex-direction: column;
-                gap: 10px;
+                gap: 6px;
                 overflow-y: auto;
                 max-height: 100%;
                 scroll-behavior: smooth;
+                position: relative;
+                z-index: 0;
+                padding: 5px 0;
             
                 &::-webkit-scrollbar {
                   display: none;
                 }
             
                 img {
-                  width: 60px;
+                  width: 80px;
                   height: 60px;
                   object-fit: contain;
                   border: 2px solid transparent;
                   cursor: pointer;
+                  opacity: 0.7;
+                  transition: transform 0.3s ease, opacity 0.3s ease;
             
                   &.active {
-                    border-color: #00aaff;
+                    transform: scale(1.3);
+                    margin-top: 0.8rem;
+                    margin-bottom: 0.8rem;
+                    opacity: 1;
+                    z-index: 1;
                   }
                 }
               }
             }
             
-        
-            // .thumbnails-wrapper {
-            //   position: relative;
-            //   max-width: 100%;
-            //   overflow: hidden;
-            //   display: flex;
-            //   align-items: center;
-            //   justify-content: center;
-        
-            //   .thumb-arrow {
-            //     cursor: pointer;
-            //     padding: 5px 10px;
-            //     background: #00aaff;
-            //     color: white;
-            //     border-radius: 50%;
-            //     user-select: none;
-            //     z-index: 2;
-            //     // font-weight: bold;
-        
-            //     &.left {
-            //       margin-right: 10px;
-            //     }
-        
-            //     &.right {
-            //       margin-left: 10px;
-            //     }
-            //   }
-        
-            //   .thumbnails {
-            //     display: flex;
-            //     gap: 10px;
-            //     overflow-x: auto;
-            //     scroll-behavior: smooth;
-            //     max-width: 100%;
-            //     padding: 10px 0;
-            //     scrollbar-width: none; // Firefox
-        
-            //     &::-webkit-scrollbar {
-            //       display: none; // Chrome, Safari
-            //     }
-        
-            //     img {
-            //       width: 60px;
-            //       height: 60px;
-            //       object-fit: cover;
-            //       border: 2px solid transparent;
-            //       cursor: pointer;
-        
-            //       &.active {
-            //         border-color: #00aaff;
-            //       }
-            //     }
-            //   }
-            // }
+            
         }
         // Masquer les images Drupal originales (facultatif)
         .field__items {