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

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
Show Stats 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

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

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

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

@ -442,11 +442,11 @@
//////////////// 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 currentIndex;
// Créer le lightbox et ses éléments
// Création de la lightbox et de ses éléments
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
@ -455,6 +455,11 @@
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 = '×';
@ -470,12 +475,29 @@
nextBtn.innerHTML = '❯';
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) => {
image.addEventListener('click', () => {
lightbox.style.display = 'flex';
img.src = image.src;
currentIndex = index;
showImage(index);
});
});
@ -484,25 +506,38 @@
lightbox.style.display = 'none';
});
// Naviguer vers l'image précédente
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
img.src = images[currentIndex].src;
// Navigation pour images précédente et suivante
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
// Naviguer vers l'image suivante
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
img.src = images[currentIndex].src;
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// 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) => {
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);
}
}
});
//////////////// end lightbox galerie image page site////////////////////////

15
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

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

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

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