bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

carroussel thumbnial vertical droite

Browse Source
This commit is contained in:
ouidade
2025-06-06 19:21:58 +02:00
parent 6bae2963fa
commit 0371076642
4 changed files with 98 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/bundle.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+27 -10
View File
@@ -5838,12 +5838,12 @@ svg.ext {
margin-top: 5rem; margin-top: 5rem;
padding: 0; padding: 0;
order: 7; order: 7;
width: 80%; width: 85%;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
display: grid; display: grid;
grid-template-columns: 1fr 10fr; grid-template-columns: 10fr 1fr;
gap: 1.5rem; gap: 4rem;
justify-content: center; justify-content: center;
margin: auto; margin: auto;
} }
@@ -5863,6 +5863,7 @@ svg.ext {
height: auto; height: auto;
object-fit: contain; object-fit: contain;
max-height: 550px; max-height: 550px;
border: none;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption {
margin-top: 1rem; margin-top: 1rem;
@@ -5872,7 +5873,6 @@ svg.ext {
color: #444; color: #444;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow {
display: none;
font-size: 2rem; font-size: 2rem;
color: #333; color: #333;
background: none; background: none;
@@ -5901,14 +5901,15 @@ svg.ext {
grid-row: 2; grid-row: 2;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper {
grid-column: 1; grid-column: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-height: 70vh; max-height: 65vh;
grid-row: 1/span 2; grid-row: 1/span 2;
top: -30px; top: -35px;
position: relative; position: relative;
overflow: hidden;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
cursor: pointer; cursor: pointer;
@@ -5918,27 +5919,43 @@ svg.ext {
border-radius: 50%; border-radius: 50%;
user-select: none; user-select: none;
z-index: 2; z-index: 2;
position: relative;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.up {
transform: rotate(90deg);
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.down {
transform: rotate(90deg);
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 6px;
overflow-y: auto; overflow-y: auto;
max-height: 100%; max-height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
position: relative;
z-index: 0;
padding: 5px 0;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar {
display: none; display: none;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img {
width: 60px; width: 80px;
height: 60px; height: 60px;
object-fit: contain; object-fit: contain;
border: 2px solid transparent; border: 2px solid transparent;
cursor: pointer; cursor: pointer;
opacity: 0.7;
transition: transform 0.3s ease, opacity 0.3s ease;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active {
border-color: #00aaff; transform: scale(1.3);
margin-top: 0.8rem;
margin-bottom: 0.8rem;
opacity: 1;
z-index: 1;
} }
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items { .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
display: none; display: none;
web/themes/custom/eql/scripts/main.js
+15 -2
View File
@@ -210,7 +210,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => { document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
images.push({ images.push({
src: img.getAttribute('src'), src: img.getAttribute('src'),
caption: img.getAttribute('alt') || 'Image sans légende' caption: img.getAttribute('alt') || ''
}); });
}); });
@@ -218,6 +218,18 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
let currentIndex = 0; let currentIndex = 0;
function scrollThumbnailToCenter(index) {
const thumbnails = document.querySelectorAll('.thumbnails img');
const activeThumb = thumbnails[index];
if (activeThumb && thumbsContainer) {
const containerHeight = thumbsContainer.clientHeight;
const thumbOffsetTop = activeThumb.offsetTop;
const thumbHeight = activeThumb.offsetHeight;
const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
}
}
function showImage(index) { function showImage(index) {
mainImage.src = images[index].src; mainImage.src = images[index].src;
caption.textContent = images[index].caption; caption.textContent = images[index].caption;
@@ -226,7 +238,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
thumbnails.forEach(img => img.classList.remove('active')); thumbnails.forEach(img => img.classList.remove('active'));
if (thumbnails[index]) { if (thumbnails[index]) {
thumbnails[index].classList.add('active'); thumbnails[index].classList.add('active');
// thumbnails[index].scrollIntoView({ block: 'center', behavior: 'smooth' }); scrollThumbnailToCenter(index); // 👈 centrage de la miniature active
} }
} }
@@ -275,6 +287,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
}); });
} }
/////////////////end diaporama ressource ////////// /////////////////end diaporama ressource //////////
web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss
+54 -65
View File
@@ -15,12 +15,12 @@
margin-top: 5rem; margin-top: 5rem;
padding: 0; padding: 0;
order: 7; order: 7;
width: 80%; width: 85%;
.carousel { .carousel {
display: grid; display: grid;
// flex-direction: row; // flex-direction: row;
grid-template-columns: 1fr 10fr; grid-template-columns: 10fr 1fr;
gap: 1.5rem; gap: 4rem;
// align-items: flex-start; // align-items: flex-start;
justify-content: center; justify-content: center;
margin: auto; margin: auto;
@@ -41,6 +41,7 @@
height: auto; height: auto;
object-fit: contain; object-fit: contain;
max-height: 550px; max-height: 550px;
border: none;
} }
.caption { .caption {
@@ -53,7 +54,7 @@
} }
.arrow { .arrow {
display: none; // display: none;
font-size: 2rem; font-size: 2rem;
color: #333; color: #333;
background: none; background: none;
@@ -87,14 +88,38 @@
grid-row: 2; grid-row: 2;
} }
.thumbnails-wrapper { .thumbnails-wrapper {
grid-column: 1; grid-column: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-height: 70vh; max-height: 65vh;
grid-row: 1 /span 2; grid-row: 1 / span 2;
top: -30px; top: -35px;
position: relative; position: relative;
overflow: hidden;
// Dégradé haut
// &::before,
// &::after {
// content: "";
// position: absolute;
// left: 0;
// right: 0;
// height: 50px;
// z-index: 1;
// pointer-events: none;
// }
// &::before {
// top: 0;
// background: linear-gradient(to bottom, white, transparent);
// }
// &::after {
// bottom: 0;
// background: linear-gradient(to top, white, transparent);
// }
.thumb-arrow { .thumb-arrow {
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@@ -103,89 +128,53 @@
border-radius: 50%; border-radius: 50%;
user-select: none; user-select: none;
z-index: 2; z-index: 2;
// font-weight: bold; position: relative;
&.up {
transform: rotate(90deg);
}
&.down {
transform: rotate(90deg);
}
} }
.thumbnails { .thumbnails {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 6px;
overflow-y: auto; overflow-y: auto;
max-height: 100%; max-height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
position: relative;
z-index: 0;
padding: 5px 0;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
img { img {
width: 60px; width: 80px;
height: 60px; height: 60px;
object-fit: contain; object-fit: contain;
border: 2px solid transparent; border: 2px solid transparent;
cursor: pointer; cursor: pointer;
opacity: 0.7;
transition: transform 0.3s ease, opacity 0.3s ease;
&.active { &.active {
border-color: #00aaff; transform: scale(1.3);
margin-top: 0.8rem;
margin-bottom: 0.8rem;
opacity: 1;
z-index: 1;
} }
} }
} }
} }
// .thumbnails-wrapper {
// position: relative;
// max-width: 100%;
// overflow: hidden;
// display: flex;
// align-items: center;
// justify-content: center;
// .thumb-arrow {
// cursor: pointer;
// padding: 5px 10px;
// background: #00aaff;
// color: white;
// border-radius: 50%;
// user-select: none;
// z-index: 2;
// // font-weight: bold;
// &.left {
// margin-right: 10px;
// }
// &.right {
// margin-left: 10px;
// }
// }
// .thumbnails {
// display: flex;
// gap: 10px;
// overflow-x: auto;
// scroll-behavior: smooth;
// max-width: 100%;
// padding: 10px 0;
// scrollbar-width: none; // Firefox
// &::-webkit-scrollbar {
// display: none; // Chrome, Safari
// }
// img {
// width: 60px;
// height: 60px;
// object-fit: cover;
// border: 2px solid transparent;
// cursor: pointer;
// &.active {
// border-color: #00aaff;
// }
// }
// }
// }
} }
// Masquer les images Drupal originales (facultatif) // Masquer les images Drupal originales (facultatif)
.field__items { .field__items {