thanks for your feedback !
yes of course here are the two custom codes I use in embeds.
The first is on the static page, here with this function:
<div class="nested-coll-wrapper" id="lightbox-{{wf {"path":"slug","type":"PlainText"\} }}"></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
jQuery(function() {
jQuery('#lightbox-{{wf {"path":"slug","type":"PlainText"\} }}').load("/gallery-nabil/{{wf {"path":"slug","type":"PlainText"\} }} .nested-coll-wrapper")
});
});
</script>
the second is in the CMS template page
Then there’s this big script in the static page settings:
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const items = document.querySelectorAll('.img-46');
const totalItems = items.length;
let itemsProcessed = 0;
const shuffledItems = Array.from(items).sort(() => Math.random() - 0.5);
shuffledItems.forEach((item, index) => {
setTimeout(() => {
item.style.opacity = 1;
item.style.transform = 'translateY(0) scale(1) skewY(0deg)';
itemsProcessed++;
if (itemsProcessed === totalItems) {
// Appeler la fonction finale une fois que toutes les itérations sont terminées
finalFunction();
}
}, index * 20);
});
function finalFunction() {
// Code à exécuter une fois que toutes les itérations et les setTimeout sont terminés
window.Webflow ||= [];
window.Webflow.push(() => {
const lightboxComponents = document.querySelectorAll(
'[lightbox="component"]',
);
lightboxComponents.forEach((component, index1) => {
let imgUrl = [];
const imagesSource = component
.querySelectorAll('.custom-pics img');
imagesSource.forEach(imgElement => {
imgUrl.push(imgElement.src); // Ajouter la source de l'image au tableau
});
//const separator = ","; //moved to top
//const lightboxImagesSrc = imagesSource.split(separator); //moved to top
// New code
const thumbnailsOtherContainer = component.querySelector('[lightbox="thumbnails-other"]');
const noOfThumbs = 3;
const thumbsClass = 'img-thumbnails-other'; //class for each thumbnail
const thumbWidth = '300'; //thumbnail width
const thumbHeight = '300'; //thumbnail height
for (let i = 0; i < noOfThumbs; i++) {
const thumb = document.createElement('img');
thumb.setAttribute('src', imgUrl[i]);
thumb.setAttribute('width', thumbWidth);
thumb.setAttribute('height', thumbHeight);
thumb.classList.add(thumbsClass);
const triggerAttr = document.createAttribute('lightbox');
triggerAttr.value = 'trigger';
thumb.setAttributeNode(triggerAttr);
thumbnailsOtherContainer.appendChild(thumb);
}
// End of new code
const swiperModal = component.querySelector('[lightbox="swiper"]');
swiperModal.classList.add(`swiper-${index1}`);
const lightboxTriggers = component.querySelectorAll('[lightbox="trigger"]');
const swiperPrev = component.querySelector('[swiper="prev-button"]');
const swiperNext = component.querySelector('[swiper="next-button"]');
const swiperPagination = component.querySelector('[swiper="pagination"]');
swiperPrev.classList.add(`swiper-button-prev-${index1}`);
swiperNext.classList.add(`swiper-button-next-${index1}`);
swiperPagination.classList.add(`swiper-pagination-${index1}`);
new Swiper(`.swiper-${index1}`, {
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: true,
navigation: {
nextEl: `.swiper-button-next-${index1}`,
prevEl: `.swiper-button-prev-${index1}`,
},
pagination: {
el: `.swiper-pagination-${index1}`,
type: 'bullets',
clickable: true,
renderBullet: function(index, className) {
return `
<span class="${className}" style="background-image: url('${imgUrl[index]}'); background-repeat: ; background-size: cover !important; background-position: center; height: 3rem; width: 3rem;')"></span>
`;
},
},
});
lightboxTriggers.forEach((trigger, index) => {
let clickCounter = 0;
trigger.addEventListener('click', () => {
if (index > 0) {
lightboxTriggers[0].click();
}
if (index > 0 || clickCounter > 0) return;
const swiperWrapper = component.querySelector(
'[lightbox="swiper-wrapper"]',
);
imgUrl.forEach((imgSrc) => {
const slide = document.createElement('div');
slide.classList.add('swiper-slide');
const slideImg = document.createElement('img');
slideImg.setAttribute('src', imgSrc);
slideImg.setAttribute('width', 'auto');
slideImg.setAttribute('height', 'auto');
slide.appendChild(slideImg);
swiperWrapper.appendChild(slide);
});
clickCounter++;
});
});
});
const swiperNextBtns = document.querySelectorAll('[swiper="next-button"]');
const swiperPrevBtns = document.querySelectorAll('[swiper="prev-button"]');
document.onkeydown = (event) => {
event = event || window.event;
if (event.code == 'ArrowLeft') {
swiperPrevBtns.forEach((btn) => {
btn.click();
});
}
if (event.code == 'ArrowRight') {
swiperNextBtns.forEach((btn) => {
btn.click();
});
}
};
});
}
});
</script>
