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/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;