lightbox diaporama site
This commit is contained in:
@@ -463,6 +463,70 @@
|
||||
// }
|
||||
// });
|
||||
|
||||
//////////////// lightbox galerie image page site////////////////////////
|
||||
|
||||
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
|
||||
// Sélectionne uniquement les images à l'intérieur de '.paragraph--type--site-diapo'
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
let currentIndex;
|
||||
|
||||
// Créer le lightbox et 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);
|
||||
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.classList.add('close');
|
||||
closeBtn.innerHTML = '×';
|
||||
lightbox.appendChild(closeBtn);
|
||||
|
||||
const prevBtn = document.createElement('a');
|
||||
prevBtn.classList.add('prev');
|
||||
prevBtn.innerHTML = '❮';
|
||||
lightbox.appendChild(prevBtn);
|
||||
|
||||
const nextBtn = document.createElement('a');
|
||||
nextBtn.classList.add('next');
|
||||
nextBtn.innerHTML = '❯';
|
||||
lightbox.appendChild(nextBtn);
|
||||
|
||||
// Ajouter un écouteur d'événement sur chaque image pour ouvrir le lightbox
|
||||
images.forEach((image, index) => {
|
||||
image.addEventListener('click', () => {
|
||||
lightbox.style.display = 'flex';
|
||||
img.src = image.src;
|
||||
currentIndex = index;
|
||||
});
|
||||
});
|
||||
|
||||
// Fermer le lightbox
|
||||
closeBtn.addEventListener('click', () => {
|
||||
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;
|
||||
});
|
||||
|
||||
// Naviguer vers l'image suivante
|
||||
nextBtn.addEventListener('click', () => {
|
||||
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
|
||||
img.src = images[currentIndex].src;
|
||||
});
|
||||
|
||||
// Fermer le lightbox quand on clique en dehors de l'image
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
if (e.target === lightbox) {
|
||||
lightbox.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
$header-height : 320px;
|
||||
$header-height : 280px;
|
||||
$header-height-pad : 160px;
|
||||
$header-height-small : 70px;
|
||||
$header-height-ultrasmall : 50px;
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
}
|
||||
}
|
||||
.layout--threecol-25-50-25{
|
||||
|
||||
flex-wrap: nowrap;
|
||||
@media(max-width: 500px){
|
||||
display: flex;
|
||||
@@ -26,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
div{
|
||||
// width: fit-content;
|
||||
width: fit-content;
|
||||
margin-bottom: 0.5rem;
|
||||
// #sites-map-container.fixed{
|
||||
// width: auto;
|
||||
@@ -102,12 +103,13 @@
|
||||
}
|
||||
}
|
||||
.layout__region--second{
|
||||
flex: 0 1 80%;
|
||||
// flex: 0 1 60%;
|
||||
width: 60%;
|
||||
.block-region-second{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 2.5rem;
|
||||
margin-left: 3.5rem;
|
||||
@media(max-width: 500px){
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
@@ -197,7 +199,10 @@
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
|
||||
.field_field_parties{
|
||||
div{width: fit-content;}
|
||||
width: 70%;
|
||||
}
|
||||
div:has(.field_field_parties){
|
||||
margin-top: 2rem;
|
||||
@media(max-width: 500px){
|
||||
|
||||
@@ -60,7 +60,7 @@ header{
|
||||
img{
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc($header-height - 5rem);
|
||||
height: calc($header-height - 1rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||
@media(max-width: 891px){
|
||||
@@ -114,6 +114,7 @@ header{
|
||||
.header_nav_container{
|
||||
flex: 0 0 0%;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
background: $blue_QDD;
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
@@ -135,10 +136,11 @@ header{
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
top: calc($header-height / 4 );
|
||||
// top: calc($header-height / 4 );
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin: 0;
|
||||
margin-top: 2rem;
|
||||
|
||||
// @media(max-width: 1200px){
|
||||
// top:0;
|
||||
// }
|
||||
@@ -148,7 +150,7 @@ header{
|
||||
// margin: 1rem;
|
||||
}
|
||||
@media(max-width: 1090px){
|
||||
top: calc($header-height-pad / 10);
|
||||
// top: calc($header-height-pad / 10);
|
||||
}
|
||||
li{
|
||||
@media(max-width: 1090px){
|
||||
@@ -234,6 +236,7 @@ header{
|
||||
.header_nav_container{
|
||||
flex: 0 0 30%;
|
||||
transform-origin: bottom right;
|
||||
min-width: fit-content;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
@@ -263,6 +266,7 @@ header{
|
||||
}
|
||||
.header_nav_container{
|
||||
flex: 0 0 30%;
|
||||
min-width: fit-content;
|
||||
transform-origin: bottom right;
|
||||
@media(max-width: 810px){
|
||||
flex: 1 0 100%;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.diaporama {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.diaporama img {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.lightbox img {
|
||||
max-width: 90%;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.lightbox .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 40px;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
@import "partials/formes-animees";
|
||||
@import "partials/animation-pilliers";
|
||||
@import "partials/map";
|
||||
@import "partials/lightbox";
|
||||
|
||||
|
||||
// @import "partials/slick_custom";
|
||||
|
||||
Reference in New Issue
Block a user