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

@media caroussel ressouce image

Browse Source
This commit is contained in:
ouidade
2025-06-08 23:17:57 +02:00
parent 309e9ffd83
commit f19639719e
4 changed files with 176 additions and 7 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
+61
View File
@@ -5882,6 +5882,11 @@ svg.ext {
display: flex;
}
}
@media screen and (max-width: 810px) {
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top {
margin-left: 0;
}
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block {
margin-left: 0;
}
@@ -6007,9 +6012,65 @@ svg.ext {
opacity: 1;
z-index: 1;
}
@media screen and (max-width: 810px) {
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
width: 100vw;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-block {
width: 90%;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails-wrapper {
width: 100%;
display: flex !important;
flex-direction: row !important; /* 👈 corrige l'orientation */
justify-content: center;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
max-height: none;
padding: 1rem 0;
position: relative;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails {
display: flex !important;
flex-direction: row !important; /* 👈 force l'alignement horizontal */
gap: 0.8 rem !important;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding: 0 1rem;
max-width: 100%;
flex-wrap: nowrap;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails::-webkit-scrollbar {
display: none;
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumbnails img {
width: 60px;
height: 45px;
flex-shrink: 0; /* évite l’écrasement */
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .thumb-arrow {
display: none; /* inutile si scroll horizontal */
}
}
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
display: none;
}
@media screen and (max-width: 810px) {
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource,
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodetitle,
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-edition,
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s-,
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-date-de-parution,
.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs {
margin-left: 7%;
}
}
body.type-media-reportage-photos .block-region-third .block-entity-fieldnodefield-projets-liee {
transform: translateY(-45.5rem);
web/themes/custom/eql/scripts/main.js
+47 -5
View File
@@ -209,6 +209,24 @@ document.addEventListener('DOMContentLoaded', function () {
function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer }) {
const images = [];
// Adapter l'orientation des vignettes si écran < 810px
function applyResponsiveThumbnailsLayout() {
if (window.innerWidth < 810) {
thumbsContainer.style.flexDirection = 'row';
thumbsContainer.style.flexWrap = 'nowrap';
thumbsContainer.style.overflowX = 'auto';
thumbsContainer.style.overflowY = 'hidden';
thumbsContainer.style.display = 'flex';
thumbsContainer.style.justifyContent = 'center';
} else {
thumbsContainer.style.flexDirection = 'column';
thumbsContainer.style.overflowY = 'auto';
thumbsContainer.style.overflowX = 'hidden';
}
}
applyResponsiveThumbnailsLayout();
window.addEventListener('resize', applyResponsiveThumbnailsLayout);
document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
images.push({
src: img.getAttribute('src'),
@@ -220,17 +238,41 @@ 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 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' });
const isMobile = window.innerWidth < 810;
if (isMobile) {
// Scroll horizontal
const containerWidth = thumbsContainer.clientWidth;
const thumbOffsetLeft = activeThumb.offsetLeft;
const thumbWidth = activeThumb.offsetWidth;
const scrollTarget = thumbOffsetLeft - (containerWidth / 2) + (thumbWidth / 2);
thumbsContainer.scrollTo({ left: scrollTarget, behavior: 'smooth' });
} else {
// Scroll vertical
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;
web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss
+67 -1
View File
@@ -8,6 +8,9 @@
@media screen and (min-width:1100px) {
display: flex;
}
@media screen and (max-width: 810px) {
margin-left: 0;
}
.block {
margin-left: 0;
}
@@ -176,12 +179,75 @@
}
@media screen and (max-width: 810px) {
.carousel {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
width: 100vw;
.main-image-block{
width: 90%;
}
}
.thumbnails-wrapper {
width: 100%;
display: flex !important;
flex-direction: row !important; /* 👈 corrige l'orientation */
justify-content: center;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
max-height: none;
padding: 1rem 0;
position: relative;
}
.thumbnails {
display: flex !important;
flex-direction: row !important; /* 👈 force l'alignement horizontal */
gap: 0.8 rem !important;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding: 0 1rem;
max-width: 100%;
flex-wrap: nowrap;
&::-webkit-scrollbar {
display: none;
}
img {
width: 60px;
height: 45px;
flex-shrink: 0; /* évite l’écrasement */
}
}
.thumb-arrow {
display: none; /* inutile si scroll horizontal */
}
}
// Masquer les images Drupal originales (facultatif)
.field__items {
display: none;
}
}
.block-entity-fieldnodefield-type-de-ressource,
.block-entity-fieldnodetitle,
.block-entity-fieldnodefield-edition,
.block-entity-fieldnodefield-auteur-s-,
.block-entity-fieldnodefield-date-de-parution,
.block-entity-fieldnodefield-mots-clefs{
@media screen and (max-width: 810px) {
margin-left: 7%;
}
}
}
}