bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fleche lightbox

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-03-21 16:11:41 +01:00
parent 578b3d2e17
commit 9dedde9ff1
11 changed files with 341 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

32
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -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;
font-size: 30px;
transform: translateY(-50%);
z-index: 10;
cursor: pointer;
user-select: none;
}
.prev {
left: 30px;
#lightbox .prev img,
#lightbox .next img {
width: 40px; /* adapte si besoin */
height: 40px;
pointer-events: none; /* évite que l'image bloque le clic */
}
.next {
right: 30px;
#lightbox .prev {
left: 20px;
}
#lightbox .next {
right: 20px;
}
/*pages*/

BIN
web/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg vendored Normal file
View File

Binary file not shown.

41
web/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg vendored Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
web/themes/custom/quartiers_de_demain/src/assets/img/next-blanc.svg Normal file
View File

Binary file not shown.

41
web/themes/custom/quartiers_de_demain/src/assets/img/prev-blanc.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

262
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -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
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let currentIndex;
// Création de la lightbox
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// 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);
// Image affichée dans la lightbox
const img = document.createElement('img');
img.classList.add('lightbox-content');
lightbox.appendChild(img);
const img = document.createElement('img');
lightbox.appendChild(img);
// Légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Élément pour afficher la légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Bouton de fermeture
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '&times;';
lightbox.appendChild(closeBtn);
// Bouton précédent avec image
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
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');
prevBtn.classList.add('prev');
prevBtn.innerHTML = '&#10094;';
lightbox.appendChild(prevBtn);
// Bouton suivant avec image
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
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');
nextBtn.classList.add('next');
nextBtn.innerHTML = '&#10095;';
lightbox.appendChild(nextBtn);
// Fonction d'affichage
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
// 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;
img.src = images[currentIndex].getAttribute('src');
// Mettre à jour l'image
img.src = images[currentIndex].getAttribute('src');
const captionText = images[currentIndex]
.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)
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
.nextElementSibling.querySelector('.image-field-caption p')
.textContent;
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// 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
lightbox.style.display = 'flex';
}
// caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
// lightbox.style.display = 'flex';
// }
// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
images.forEach((image, index) => {
image.addEventListener('click', () => {
showImage(index);
});
});
// // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
// images.forEach((image, index) => {
// image.addEventListener('click', () => {
// showImage(index);
// });
// });
// Fermer le lightbox
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
// // Fermer le lightbox
// closeBtn.addEventListener('click', () => {
// lightbox.style.display = 'none';
// });
// Navigation pour images précédente et suivante
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
// // Navigation pour images précédente et suivante
// prevBtn.addEventListener('click', (e) => {
// e.stopPropagation();
// showImage(currentIndex - 1);
// });
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// nextBtn.addEventListener('click', (e) => {
// e.stopPropagation();
// showImage(currentIndex + 1);
// });
// Fermer le lightbox en cliquant en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});
// // Fermer le lightbox en cliquant en dehors de l'image
// lightbox.addEventListener('click', (e) => {
// if (e.target === lightbox) {
// lightbox.style.display = 'none';
// }
// });
// Ajout des contrôles clavier (Échap, flèches gauche/droite)
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);
}
}
});
// // Ajout des contrôles clavier (Échap, flèches gauche/droite)
// 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);
// }
// }
// });
//////////////// end lightbox galerie image page site////////////////////////

53
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss
View File

@@ -50,20 +50,43 @@ body {
cursor: pointer;
}
.prev, .next {
position: absolute;
top: 50%;
color: white;
font-size: 30px;
cursor: pointer;
user-select: none;
}
// .prev, .next {
// position: absolute;
// top: 50%;
// color: white;
// font-size: 30px;
// cursor: pointer;
// user-select: none;
// }
.prev {
left: 30px;
}
// .prev {
// left: 30px;
// }
.next {
right: 30px;
}
// .next {
// 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;
}

11
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -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;
}

1
web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
View File

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

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

@@ -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">
<svg />
</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>
<a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
<a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
</div>
</div>
{% endif %}