fleche lightbox

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

@@ -1456,6 +1456,15 @@ footer {
   width: fit-content;
   padding-left: 0.5rem;
   background: black;
+  display: flex;
+  justify-content: center;
+  flex: 0 0 40%;
+  margin-top: 1rem;
+  margin-bottom: 2rem !important;
+  color: white;
+  background: black;
+  text-transform: uppercase;
+  font-size: 0.6rem;
 }
 @media (max-width: 810px) {
   #home .__container-deroulement .config_pages--type--deroulement .field_field_calendrier .file--application-pdf {
@@ -1963,21 +1972,28 @@ body {
   cursor: pointer;
 }
 
-.prev, .next {
+#lightbox .prev,
+#lightbox .next {
   position: absolute;
   top: 50%;
-  color: white;
+  transform: translateY(-50%);
-  font-size: 30px;
+  z-index: 10;
   cursor: pointer;
-  user-select: none;
 }
 
-.prev {
+#lightbox .prev img,
-  left: 30px;
+#lightbox .next img {
+  width: 40px; /* adapte si besoin */
+  height: 40px;
+  pointer-events: none; /* évite que l'image bloque le clic */
 }
 
-.next {
+#lightbox .prev {
-  right: 30px;
+  left: 20px;
+}
+
+#lightbox .next {
+  right: 20px;
 }
 
 /*pages*/

web/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490662"
+   height="90.491997"
+   viewBox="0 0 90.490662 90.491995"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8006,-9024.7622)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>

web/themes/custom/quartiers_de_demain/src/assets/img/prev-blanc.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="90.490662"
+   height="90.491997"
+   viewBox="0 0 90.490662 90.491995"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath393">
+      <path
+         d="M 0,0 H 1920 V 9000 H 0 Z"
+         transform="translate(-918.03445,-2163.9844)"
+         id="path393" />
+    </clipPath>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-1178.8006,-9024.7622)">
+    <g
+       id="g696">
+      <path
+         id="path392"
+         d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
+         clip-path="url(#clipPath393)" />
+      <path
+         id="path394"
+         d="M 0,0 -9.997,-8.944 0,-17.887"
+         style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
+    </g>
+  </g>
+</svg>

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -474,101 +474,207 @@ $(document).ready(function(){
 
 
 //////////////// start lightbox galerie image page site////////////////////////
+// Sélection des images à ouvrir dans la lightbox
+let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+let currentIndex;
 
-    // Sélection des images et de leurs légendes dans la galerie
+// Création de la lightbox
-    let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+const lightbox = document.createElement('div');
-    let currentIndex;
+lightbox.id = 'lightbox';
+lightbox.classList.add('lightbox');
+document.body.appendChild(lightbox);
 
-    // Création de la lightbox et de ses éléments
+// Image affichée dans la lightbox
-    const lightbox = document.createElement('div');
+const img = document.createElement('img');
-    lightbox.id = 'lightbox';
+img.classList.add('lightbox-content');
-    lightbox.classList.add('lightbox');
+lightbox.appendChild(img);
-    document.body.appendChild(lightbox);
 
-    const img = document.createElement('img');
+// Légende
-    lightbox.appendChild(img);
+const caption = document.createElement('p');
+caption.classList.add('caption');
+lightbox.appendChild(caption);
 
-    // Élément pour afficher la légende
+// Bouton de fermeture
-    const caption = document.createElement('p');
+const closeBtn = document.createElement('span');
-    caption.classList.add('caption');
+closeBtn.classList.add('close');
-    lightbox.appendChild(caption);
+closeBtn.innerHTML = '×';
+lightbox.appendChild(closeBtn);
 
-    const closeBtn = document.createElement('span');
+// Bouton précédent avec image
-    closeBtn.classList.add('close');
+const prevBtn = document.createElement('a');
-    closeBtn.innerHTML = '×';
+prevBtn.classList.add('prev');
-    lightbox.appendChild(closeBtn);
+const prevImg = document.createElement('img');
+prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
+prevImg.alt = 'Précédent';
+prevBtn.appendChild(prevImg);
+lightbox.appendChild(prevBtn);
 
-    const prevBtn = document.createElement('a');
+// Bouton suivant avec image
-    prevBtn.classList.add('prev');
+const nextBtn = document.createElement('a');
-    prevBtn.innerHTML = '❮';
+nextBtn.classList.add('next');
-    lightbox.appendChild(prevBtn);
+const nextImg = document.createElement('img');
+nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
+nextImg.alt = 'Suivant';
+nextBtn.appendChild(nextImg);
+lightbox.appendChild(nextBtn);
 
-    const nextBtn = document.createElement('a');
+// Fonction d'affichage
-    nextBtn.classList.add('next');
+function showImage(index) {
-    nextBtn.innerHTML = '❯';
+  if (index < 0) index = images.length - 1;
-    lightbox.appendChild(nextBtn);
+  if (index >= images.length) index = 0;
+  currentIndex = index;
 
-    // Fonction pour afficher l'image et la légende à l'index donné
+  img.src = images[currentIndex].getAttribute('src');
-    function showImage(index) {
-    if (index < 0) index = images.length - 1;
-    if (index >= images.length) index = 0;
-    currentIndex = index;
 
-    // Mettre à jour l'image
+  const captionText = images[currentIndex]
-    img.src = images[currentIndex].getAttribute('src');
+    .closest('.cadre-img-zoom')
+    ?.nextElementSibling?.querySelector('.image-field-caption p')
+    ?.textContent || '';
 
-    // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
+  caption.textContent = captionText;
-    const captionText = images[currentIndex]
+  lightbox.style.display = 'flex';
-      .closest('.cadre-img-zoom')
+}
-      .nextElementSibling.querySelector('.image-field-caption p')
+
-      .textContent;
+// Clic sur une image
+images.forEach((image, index) => {
+  image.addEventListener('click', () => {
+    showImage(index);
+  });
+});
+
+// Navigation & fermeture
+closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
+prevBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex - 1);
+});
+nextBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  showImage(currentIndex + 1);
+});
+
+// Clic en dehors de l'image pour fermer
+lightbox.addEventListener('click', (e) => {
+  if (e.target === lightbox) lightbox.style.display = 'none';
+});
+
+// Clavier
+document.addEventListener('keydown', (e) => {
+  if (lightbox.style.display === 'flex') {
+    if (e.key === 'Escape') lightbox.style.display = 'none';
+    else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
+    else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
+  }
+});
+
+//     // Sélection des images et de leurs légendes dans la galerie
+//     let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
+//     let currentIndex;
+
+//     // Création de la lightbox et de ses éléments
+//     const lightbox = document.createElement('div');
+//     lightbox.id = 'lightbox';
+//     lightbox.classList.add('lightbox');
+//     document.body.appendChild(lightbox);
+
+//     const img = document.createElement('img');
+//     lightbox.appendChild(img);
+
+//     // Élément pour afficher la légende
+//     const caption = document.createElement('p');
+//     caption.classList.add('caption');
+//     lightbox.appendChild(caption);
+
+//     const closeBtn = document.createElement('span');
+//     closeBtn.classList.add('close');
+//     closeBtn.innerHTML = '&times;';
+//     lightbox.appendChild(closeBtn);
+
+//     // const prevBtn = document.createElement('a');
+//     // prevBtn.classList.add('prev');
+//     // prevBtn.innerHTML = '&#10094;';
+//     // lightbox.appendChild(prevBtn);
+//     const prevBtn = document.createElement('a');
+// prevBtn.classList.add('prev');
+// const prevImg = document.createElement('img');
+// prevImg.src = '/img/arrow-left.svg'; // <-- adapte le chemin à ton projet
+// prevImg.alt = 'Précédent';
+// prevBtn.appendChild(prevImg);
+
+
+//     // const nextBtn = document.createElement('a');
+//     // nextBtn.classList.add('next');
+//     // nextBtn.innerHTML = '&#10095;';
+//     // lightbox.appendChild(nextBtn);
+//     const nextBtn = document.createElement('a');
+// nextBtn.classList.add('next');
+// const nextImg = document.createElement('img');
+// nextImg.src = '/img/arrow-right.svg'; // <-- adapte ici aussi
+// nextImg.alt = 'Suivant';
+// nextBtn.appendChild(nextImg);
+
+
+//     // Fonction pour afficher l'image et la légende à l'index donné
+//     function showImage(index) {
+//     if (index < 0) index = images.length - 1;
+//     if (index >= images.length) index = 0;
+//     currentIndex = index;
+
+//     // Mettre à jour l'image
+//     img.src = images[currentIndex].getAttribute('src');
+
+//     // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
+//     const captionText = images[currentIndex]
+//       .closest('.cadre-img-zoom')
+//       .nextElementSibling.querySelector('.image-field-caption p')
+//       .textContent;
       
-    caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
+//     caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
-    lightbox.style.display = 'flex';
+//     lightbox.style.display = 'flex';
-    }
+//     }
 
-    // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
+//     // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
-    images.forEach((image, index) => {
+//     images.forEach((image, index) => {
-    image.addEventListener('click', () => {
+//     image.addEventListener('click', () => {
-      showImage(index);
+//       showImage(index);
-    });
+//     });
-    });
+//     });
 
-    // Fermer le lightbox
+//     // Fermer le lightbox
-    closeBtn.addEventListener('click', () => {
+//     closeBtn.addEventListener('click', () => {
-    lightbox.style.display = 'none';
+//     lightbox.style.display = 'none';
-    });
+//     });
 
-    // Navigation pour images précédente et suivante
+//     // Navigation pour images précédente et suivante
-    prevBtn.addEventListener('click', (e) => {
+//     prevBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
+//     e.stopPropagation();
-    showImage(currentIndex - 1);
+//     showImage(currentIndex - 1);
-    });
+//     });
 
-    nextBtn.addEventListener('click', (e) => {
+//     nextBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
+//     e.stopPropagation();
-    showImage(currentIndex + 1);
+//     showImage(currentIndex + 1);
-    });
+//     });
 
-    // Fermer le lightbox en cliquant en dehors de l'image
+//     // Fermer le lightbox en cliquant en dehors de l'image
-    lightbox.addEventListener('click', (e) => {
+//     lightbox.addEventListener('click', (e) => {
-    if (e.target === lightbox) {
+//     if (e.target === lightbox) {
-      lightbox.style.display = 'none';
+//       lightbox.style.display = 'none';
-    }
+//     }
-    });
+//     });
 
-    // Ajout des contrôles clavier (Échap, flèches gauche/droite)
+//     // Ajout des contrôles clavier (Échap, flèches gauche/droite)
-    document.addEventListener('keydown', (e) => {
+//     document.addEventListener('keydown', (e) => {
-    if (lightbox.style.display === 'flex') {
+//     if (lightbox.style.display === 'flex') {
-      if (e.key === 'Escape') {
+//       if (e.key === 'Escape') {
-        lightbox.style.display = 'none';
+//         lightbox.style.display = 'none';
-      } else if (e.key === 'ArrowLeft') {
+//       } else if (e.key === 'ArrowLeft') {
-        showImage(currentIndex - 1);
+//         showImage(currentIndex - 1);
-      } else if (e.key === 'ArrowRight') {
+//       } else if (e.key === 'ArrowRight') {
-        showImage(currentIndex + 1);
+//         showImage(currentIndex + 1);
-      }
+//       }
-    }
+//     }
-    });
+//     });
 
 
 //////////////// end lightbox galerie image page site////////////////////////

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss

@@ -50,20 +50,43 @@ body {
     cursor: pointer;
   }
   
-  .prev, .next {
+  // .prev, .next {
-    position: absolute;
+  //   position: absolute;
-    top: 50%;
+  //   top: 50%;
-    color: white;
+  //   color: white;
-    font-size: 30px;
+  //   font-size: 30px;
-    cursor: pointer;
+  //   cursor: pointer;
-    user-select: none;
+  //   user-select: none;
-  }
+  // }
   
-  .prev {
+  // .prev {
-    left: 30px;
+  //   left: 30px;
-  }
+  // }
   
-  .next {
+  // .next {
-    right: 30px;
+  //   right: 30px;
-  }
+  // }
-  
+  
+  #lightbox .prev,
+#lightbox .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  cursor: pointer;
+}
+
+#lightbox .prev img,
+#lightbox .next img {
+  width: 40px; /* adapte si besoin */
+  height: 40px;
+  pointer-events: none; /* évite que l'image bloque le clic */
+}
+
+#lightbox .prev {
+  left: 20px;
+}
+
+#lightbox .next {
+  right: 20px;
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -237,9 +237,16 @@
                 .file--application-pdf{
                     width: fit-content;
                     padding-left: 0.5rem;
-                    // padding-bottom: 0.2rem;
-                    // padding-top: 0.2rem;
                     background: black;
+                    display: flex;
+                    justify-content: center;
+                    flex: 0 0 40%;
+                    margin-top: 1rem;
+                    margin-bottom: 2rem !important;
+                    color: white;
+                    background: black;
+                    text-transform: uppercase;
+                    font-size: 0.6rem;
                     @media (max-width:810px) {  
                         margin-left: 0;
                     }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -36,6 +36,7 @@
 @import "partials/lightbox";
 
 
+
 // @import "partials/slick_custom";
 
 

web/themes/custom/quartiers_de_demain/templates/field--paragraph--site-diapo.html.twig

@@ -77,30 +77,8 @@
     <div id="lightbox" class="lightbox">
       <span class="close">&times;</span>
       <img class="lightbox-content" id="lightbox-img">
-      <a class="prev" id="prev">
+      <a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
-            <svg />
+      <a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
-        </clipPath>
-      </defs>
-      <g
-        id="g1"
-        transform="translate(-1178.8005,-9024.7618)">
-        <g
-          id="g696">
-          <path
-            id="path392"
-            d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
-            style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-            transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
-            clip-path="url(#clipPath393)" />
-          <path
-            id="path394"
-            d="M 0,0 -9.997,-8.944 0,-17.887"
-            style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-            transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
-        </g>
-      </g>
-</svg></a>
-      <a class="next" id="next">&#10095;</a>
     </div>
   </div>
 {% endif %}