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

taille et légende img lightbox

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-11-27 17:42:02 +01:00
parent fd8584a9a6
commit 7a8abd9b5e
3 changed files with 67 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -569,24 +569,50 @@ function showImage(index) {
if (index >= images.length) index = 0;
currentIndex = index;
img.src = images[currentIndex].getAttribute('src');
const currentImg = images[currentIndex];
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
?.nextElementSibling?.querySelector('.image-field-caption p')
?.textContent || '';
// 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
const parentLink = currentImg.closest('a');
if (parentLink && parentLink.getAttribute('href')) {
img.src = parentLink.getAttribute('href');
} else {
img.src = currentImg.getAttribute('src');
}
// 👉 2. Trouver le conteneur qui porte la légende
// - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
// - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
const wrapper =
currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
currentImg.closest('.images'); // cas 2
let captionText =
wrapper?.querySelector('.image-field-caption p')?.textContent ||
currentImg.alt || // fallback si pas de blockquote
'';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de naviguer
e.stopPropagation(); // (optionnel) empêche d'autres handlers de se déclencher
e.preventDefault(); // empêche le <a> de s'ouvrir
e.stopPropagation(); // empêche des comportements externes
showImage(index);
});
// 🔒 Empêche le clic sur le <a> parent d'agir aussi
const parentLink = image.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
});

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

File diff suppressed because one or more lines are too long

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

@@ -511,24 +511,50 @@ function showImage(index) {
if (index >= images.length) index = 0;
currentIndex = index;
img.src = images[currentIndex].getAttribute('src');
const currentImg = images[currentIndex];
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
?.nextElementSibling?.querySelector('.image-field-caption p')
?.textContent || '';
// 👉 1. Utiliser l'IMAGE ORIGINALE (href du <a>) si possible
const parentLink = currentImg.closest('a');
if (parentLink && parentLink.getAttribute('href')) {
img.src = parentLink.getAttribute('href');
} else {
img.src = currentImg.getAttribute('src');
}
// 👉 2. Trouver le conteneur qui porte la légende
// - Cas 1 : <div><div class="cadre-img-zoom"><img></div><blockquote class="image-field-caption">...</blockquote></div>
// - Cas 2 : <div class="images"><a><img></a><blockquote class="image-field-caption">...</blockquote></div>
const wrapper =
currentImg.closest('.cadre-img-zoom')?.parentElement || // cas 1
currentImg.closest('.images'); // cas 2
let captionText =
wrapper?.querySelector('.image-field-caption p')?.textContent ||
currentImg.alt || // fallback si pas de blockquote
'';
caption.textContent = captionText;
lightbox.style.display = 'flex';
}
// Clic sur une image
images.forEach((image, index) => {
image.addEventListener('click', (e) => {
e.preventDefault(); // empêche le <a> de naviguer
e.stopPropagation(); // (optionnel) empêche d'autres handlers de se déclencher
e.preventDefault(); // empêche le <a> de s'ouvrir
e.stopPropagation(); // empêche des comportements externes
showImage(index);
});
// 🔒 Empêche le clic sur le <a> parent d'agir aussi
const parentLink = image.closest('a');
if (parentLink) {
parentLink.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
});