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;
padding: 0;
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 {
display: grid;
grid-template-columns: 1fr 10fr;
gap: 1.5rem;
grid-template-columns: 10fr 1fr;
gap: 4rem;
justify-content: center;
margin: auto;
}
@@ -5863,6 +5863,7 @@ svg.ext {
height: auto;
object-fit: contain;
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 {
margin-top: 1rem;
@@ -5872,7 +5873,6 @@ svg.ext {
color: #444;
}
.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;
color: #333;
background: none;
@@ -5901,14 +5901,15 @@ svg.ext {
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 {
grid-column: 1;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
max-height: 70vh;
max-height: 65vh;
grid-row: 1/span 2;
top: -30px;
top: -35px;
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 {
cursor: pointer;
@@ -5918,27 +5919,43 @@ svg.ext {
border-radius: 50%;
user-select: none;
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 {
display: flex;
flex-direction: column;
gap: 10px;
gap: 6px;
overflow-y: auto;
max-height: 100%;
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 {
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 {
width: 60px;
width: 80px;
height: 60px;
object-fit: contain;
border: 2px solid transparent;
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 {
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 {
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) => {
images.push({
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;
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) {
mainImage.src = images[index].src;
caption.textContent = images[index].caption;
@@ -226,7 +238,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
thumbnails.forEach(img => img.classList.remove('active'));
if (thumbnails[index]) {
thumbnails[index].classList.add('active');
// thumbnails[index].scrollIntoView({ block: 'center', behavior: 'smooth' });
scrollThumbnailToCenter(index); // 👈 centrage de la miniature active
}
}
@@ -274,6 +286,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
}
});
}
/////////////////end diaporama ressource //////////
web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss
+55 -66
View File
@@ -15,12 +15,12 @@
margin-top: 5rem;
padding: 0;
order: 7;
width: 80%;
width: 85%;
.carousel {
display: grid;
// flex-direction: row;
grid-template-columns: 1fr 10fr;
gap: 1.5rem;
grid-template-columns: 10fr 1fr;
gap: 4rem;
// align-items: flex-start;
justify-content: center;
margin: auto;
@@ -41,6 +41,7 @@
height: auto;
object-fit: contain;
max-height: 550px;
border: none;
}
.caption {
@@ -53,7 +54,7 @@
}
.arrow {
display: none;
// display: none;
font-size: 2rem;
color: #333;
background: none;
@@ -87,14 +88,38 @@
grid-row: 2;
}
.thumbnails-wrapper {
grid-column: 1;
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
max-height: 70vh;
grid-row: 1 /span 2;
top: -30px;
max-height: 65vh;
grid-row: 1 / span 2;
top: -35px;
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 {
cursor: pointer;
padding: 5px 10px;
@@ -103,89 +128,53 @@
border-radius: 50%;
user-select: none;
z-index: 2;
// font-weight: bold;
position: relative;
&.up {
transform: rotate(90deg);
}
&.down {
transform: rotate(90deg);
}
}
.thumbnails {
display: flex;
flex-direction: column;
gap: 10px;
gap: 6px;
overflow-y: auto;
max-height: 100%;
scroll-behavior: smooth;
position: relative;
z-index: 0;
padding: 5px 0;
&::-webkit-scrollbar {
display: none;
}
img {
width: 60px;
width: 80px;
height: 60px;
object-fit: contain;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.7;
transition: transform 0.3s ease, opacity 0.3s ease;
&.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)
.field__items {