soulignement header

This commit is contained in:
ouidade 2024-10-31 00:57:11 +01:00
parent 0485d1476c
commit cab86fcb11
5 changed files with 106 additions and 62 deletions

File diff suppressed because one or more lines are too long

View File

@ -436,6 +436,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-o
display: block; display: block;
border-bottom: solid white 1px; border-bottom: solid white 1px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
width: 60%; /* Réduit la largeur du soulignement à 50% */
} }
header .header_nav_container.hidden { header .header_nav_container.hidden {
transform: translateX(30%); transform: translateX(30%);
@ -1654,6 +1655,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 999; z-index: 999;
flex-direction: column;
} }
.lightbox img { .lightbox img {
@ -1661,6 +1663,15 @@ body {
max-height: 80%; max-height: 80%;
} }
#lightbox .caption {
color: white;
font-size: 1rem;
text-align: center;
margin-top: 10px;
max-width: 90%;
margin: 10px auto;
}
.lightbox .close { .lightbox .close {
position: absolute; position: absolute;
top: 20px; top: 20px;

View File

@ -442,11 +442,11 @@
//////////////// start lightbox galerie image page site//////////////////////// //////////////// start lightbox galerie image page site////////////////////////
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo' // Sélection des images et de leurs légendes dans la galerie
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger'); let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let currentIndex; let currentIndex;
// Créer le lightbox et ses éléments // Création de la lightbox et de ses éléments
const lightbox = document.createElement('div'); const lightbox = document.createElement('div');
lightbox.id = 'lightbox'; lightbox.id = 'lightbox';
lightbox.classList.add('lightbox'); lightbox.classList.add('lightbox');
@ -455,6 +455,11 @@
const img = document.createElement('img'); const img = document.createElement('img');
lightbox.appendChild(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'); const closeBtn = document.createElement('span');
closeBtn.classList.add('close'); closeBtn.classList.add('close');
closeBtn.innerHTML = '×'; closeBtn.innerHTML = '×';
@ -470,12 +475,29 @@
nextBtn.innerHTML = '❯'; nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn); lightbox.appendChild(nextBtn);
// Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox // 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';
}
// É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', () => {
lightbox.style.display = 'flex'; showImage(index);
img.src = image.src;
currentIndex = index;
}); });
}); });
@ -484,25 +506,38 @@
lightbox.style.display = 'none'; lightbox.style.display = 'none';
}); });
// Naviguer vers l'image précédente // Navigation pour images précédente et suivante
prevBtn.addEventListener('click', () => { prevBtn.addEventListener('click', (e) => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1; e.stopPropagation();
img.src = images[currentIndex].src; showImage(currentIndex - 1);
}); });
// Naviguer vers l'image suivante nextBtn.addEventListener('click', (e) => {
nextBtn.addEventListener('click', () => { e.stopPropagation();
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0; showImage(currentIndex + 1);
img.src = images[currentIndex].src;
}); });
// Fermer le lightbox quand on clique 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)
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//////////////////////// //////////////// end lightbox galerie image page site////////////////////////

View File

@ -131,26 +131,17 @@ header{
display: none; display: none;
} }
ul { ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
// top: calc($header-height / 4 );
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
// margin-top: 2rem;
// @media(max-width: 1200px){
// top:0;
// }
@media(max-width: 1025px){ @media(max-width: 1025px){
top: 0; top: 0;
align-items: center; align-items: center;
// margin: 1rem;
} }
@media(max-width: 1090px){ @media(max-width: 1090px){
// top: calc($header-height-pad / 10);
} }
li{ li{
width: 100%; width: 100%;
@ -158,9 +149,6 @@ header{
@media(max-width: 1090px){ @media(max-width: 1090px){
padding-top: 0.3rem; padding-top: 0.3rem;
} }
// @media(max-width: 500px){
// padding-top: 0.5rem;
// }
a{ a{
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
@ -180,9 +168,10 @@ header{
::after{ ::after{
content: ""; content: "";
display: block; display: block;
// width: 80px;
border-bottom: solid white 1px; border-bottom: solid white 1px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
width: 60%; /* Réduit la largeur du soulignement à 50% */
// margin: 0 auto; /* Centre le soulignement sous l'élément */
} }
} }

View File

@ -23,12 +23,21 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 999; z-index: 999;
flex-direction: column;
} }
.lightbox img { .lightbox img {
max-width: 90%; max-width: 90%;
max-height: 80%; max-height: 80%;
} }
#lightbox .caption {
color: white;
font-size: 1rem;
text-align: center;
margin-top: 10px;
max-width: 90%;
margin: 10px auto;
}
.lightbox .close { .lightbox .close {
position: absolute; position: absolute;