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

lightbox diaporama site

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-10-17 13:06:30 +02:00
parent f60cb1b088
commit ec5fc137d4
10 changed files with 239 additions and 24 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

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

@@ -193,7 +193,7 @@ h2 {
}
.layout-container main {
width: 100%;
padding-top: 320px;
padding-top: 280px;
}
@media (max-width: 810px) {
.layout-container main {
@@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 {
}
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
display: none;
height: 320px;
height: 280px;
}
@media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@@ -316,7 +316,7 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .
header .header_left_container img {
width: auto;
margin: auto;
height: calc(320px - 5rem);
height: calc(280px - 1rem);
padding: 2rem;
transition: height 0.3s; /* Add transition for smooth resizing */
}
@@ -379,6 +379,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
header .header_nav_container {
flex: 0 0 0%;
width: 100%;
min-width: fit-content;
background: rgb(7, 50, 194);
text-align: center;
transform: translateX(0);
@@ -398,10 +399,9 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
flex-direction: column;
align-items: flex-start;
position: relative;
top: 80px;
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
margin-top: 2rem;
}
@media (max-width: 1025px) {
header .header_nav_container #block-quartiers-de-demain-entete ul {
@@ -409,11 +409,6 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
align-items: center;
}
}
@media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 16px;
}
}
@media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem;
@@ -464,7 +459,7 @@ header .header:hover + .header_nav_container {
/* Taille définitive du header après l'animation */
.header--collapsed {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%;
transform-origin: bottom right;
transition: all 1s ease-in-out;
@@ -495,6 +490,7 @@ header .header:hover + .header_nav_container {
.header--collapsed .header_nav_container {
flex: 0 0 30%;
transform-origin: bottom right;
min-width: fit-content;
}
@media (max-width: 810px) {
.header--collapsed .header_nav_container {
@@ -505,7 +501,7 @@ header .header:hover + .header_nav_container {
}
.header--collapsed-already {
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
height: 280px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%;
transform-origin: bottom right;
transition: all 0s ease-in-out;
@@ -530,6 +526,7 @@ header .header:hover + .header_nav_container {
}
.header--collapsed-already .header_nav_container {
flex: 0 0 30%;
min-width: fit-content;
transform-origin: bottom right;
}
@media (max-width: 810px) {
@@ -1633,6 +1630,64 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
z-index: 0;
}
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;
}
/*pages*/
#home .config_pages--type--diaporama-home {
position: relative;
@@ -2847,6 +2902,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
margin-bottom: 3rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div {
width: fit-content;
margin-bottom: 0.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div #sites-map-container {
@@ -2915,13 +2971,13 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-left: 0.2rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second {
flex: 0 1 80%;
width: 60%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 2.5rem;
margin-left: 3.5rem;
}
@media (max-width: 500px) {
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
@@ -3000,6 +3056,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
font-size: 0.5rem;
color: rgb(7, 50, 194);
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties {
width: 70%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties div {
width: fit-content;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
margin-top: 2rem;
}

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

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

2
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@@ -1,5 +1,5 @@
$header-height : 320px;
$header-height : 280px;
$header-height-pad : 160px;
$header-height-small : 70px;
$header-height-ultrasmall : 50px;

13
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss
View File

@@ -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){

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

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

58
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/lightbox.scss Normal file
View File

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

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

@@ -33,6 +33,7 @@
@import "partials/formes-animees";
@import "partials/animation-pilliers";
@import "partials/map";
@import "partials/lightbox";
// @import "partials/slick_custom";

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

@@ -74,5 +74,11 @@
{% if multiple %}
</div>
{% endif %}
<div id="lightbox" class="lightbox">
<span class="close">&times;</span>
<img class="lightbox-content" id="lightbox-img">
<a class="prev" id="prev">&#10094;</a>
<a class="next" id="next">&#10095;</a>
</div>
</div>
{% endif %}

15
web/themes/custom/quartiers_de_demain/templates/image.html.twig Normal file
View File

@@ -0,0 +1,15 @@
{#
/**
* @file
* Default theme implementation of an image.
*
* Available variables:
* - attributes: HTML attributes for the img tag.
* - style_name: (optional) The name of the image style applied.
*
* @see template_preprocess_image()
*
* @ingroup themeable
*/
#}
<img class="lightbox-trigger" {{ attributes }} />