Hey everyone !
I have a problem with CMS LOAD render all, I only have 100 items displayed, but there should be 130, do you have any idea where this is coming from please?
thanks you 
here’s the link: Webflow - Arvin Studio - Portfolio)
Hey @shavinz! Seems like the page is not available for me to take a look at. But please check that you have enabled Webflow’s native pagination in the collection settings.
This is a required step for all load modes
Hey @Support-Luis, sorry for this mistake about the link, here is the good one: Webflow - Arvin Studio - Portfolio
and yes Pagination is already enable
thanks in advance for your feedback!
Hey @Shavinz! I see you are using some code to manipulate the elements. I believe using a CMS Load callback instead of the CMS Combine will work better and as you are using the render-all we can await until all items are loaded to run the code.
Please try this instead of the existing code in your page
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
// Define an async function to use await
async function processRenderingQueue() {
try {
// Await the fulfillment of the renderingQueue Promise
const result = await listInstance.renderingQueue;
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) {
finalFunction();
}
}, index * 10);
});
function finalFunction() {
window.Webflow ||= [];
window.Webflow.push(() => {
const lightboxComponents = document.querySelectorAll('[lightbox="component"]');
lightboxComponents.forEach((component, index1) => {
let imgUrl = [];
const imagesSource = component.querySelectorAll('.custom-pics');
imagesSource.forEach((imgElement) => {
imgUrl.push(imgElement.src);
});
const thumbnailsOtherContainer = component.querySelector(
'[lightbox="thumbnails-other"]'
);
const noOfThumbs = 3;
const thumbsClass = 'img-thumbnails-other';
const thumbWidth = '300';
const thumbHeight = '300';
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);
}
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}`);
let swiperSpeed = 1000; // Par défaut
// Détecter si l'appareil est un mobile
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
swiperSpeed = 500;
}
gsap.to(`.swiper-${index1}`, {
duration: swiperSpeed / 500,
ease: 'power2.inOut',
scrollTrigger: {
trigger: `.swiper-${index1}`,
start: 'top top',
end: 'bottom bottom',
scrub: 1,
invalidateOnRefresh: true,
},
});
new Swiper(`.swiper-${index1}`, {
slidesPerView: 1,
spaceBetween: '100%',
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>
`;
},
},
speed: swiperSpeed, // Utiliser la vitesse déterminée ci-dessus
});
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();
});
}
};
});
});
}
} catch (error) {
// Handle any errors that may occur during the Promise execution
console.error('Error processing renderingQueue:', error);
}
}
// Call the async function to start processing the renderingQueue
processRenderingQueue();
},
]);
</script>
1 Like
Okay i will try ! and let you know
okay so perfect it displays but the interaction doesn’t work on additional items, only on the first 100, I have a nested collection on my template page, maybe it’s coming from there?
if you want to try: Nabil - Photography
Can you add fs-cmsload-resetix="true" to the list setup? This should get the interactions back up and running 
1 Like
Perfect you’re a legend ! The interaction works, however I have one last problem, I’m sorry ahah
But when I click on the additional items, they don’t retrieve the info from my nested collection, do you know why? Its like empty 
whereas on the first 100, they do.
Hmmm this is added by the code embed on each element right? Might be because we are using the DOMContentLoaded event. We could try using the same callback as the other code, waiting for CMS Load to be done rendering so all the fetch only happens when all items are properly loaded.
Not sure on this approach as this is a unique use case, but we could try 
Yes you’re right !
I’ll have to add your script to the embed, won’t I?
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
// Define an async function to use await
async function processRenderingQueue() {
try {
// Await the fulfillment of the renderingQueue Promise
const result = await listInstance.renderingQueue;
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) {
finalFunction();
}
}, index * 10);
});
function finalFunction() {
window.Webflow ||= [];
window.Webflow.push(() => {
const lightboxComponents = document.querySelectorAll('[lightbox="component"]');
lightboxComponents.forEach((component, index1) => {
let imgUrl = [];
const imagesSource = component.querySelectorAll('.custom-pics');
imagesSource.forEach((imgElement) => {
imgUrl.push(imgElement.src);
});
const thumbnailsOtherContainer = component.querySelector(
'[lightbox="thumbnails-other"]'
);
const noOfThumbs = 3;
const thumbsClass = 'img-thumbnails-other';
const thumbWidth = '300';
const thumbHeight = '300';
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);
}
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}`);
let swiperSpeed = 1000; // Par défaut
// Détecter si l'appareil est un mobile
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
swiperSpeed = 500;
}
gsap.to(`.swiper-${index1}`, {
duration: swiperSpeed / 500,
ease: 'power2.inOut',
scrollTrigger: {
trigger: `.swiper-${index1}`,
start: 'top top',
end: 'bottom bottom',
scrub: 1,
invalidateOnRefresh: true,
},
});
new Swiper(`.swiper-${index1}`, {
slidesPerView: 1,
spaceBetween: '100%',
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>
`;
},
},
speed: swiperSpeed, // Utiliser la vitesse déterminée ci-dessus
});
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();
});
}
};
});
});
}
} catch (error) {
// Handle any errors that may occur during the Promise execution
console.error('Error processing renderingQueue:', error);
}
}
// Call the async function to start processing the renderingQueue
processRenderingQueue();
},
]);
</script>
No, the script above works fine as it is. But I see you have an embed using the dynamic slugs to load some elements from the template page…
Which seems to not be firing for newly rendered items, these being any item in your second pagination page
Yes, that’s exactly it. Do you have any idea what I should do?
I’ve just tried adding a callback but it doesn’t seem to work
Let’s try this.
We will create a custom event that will be fired from the Callback we use to animate the items.
<div class="nested-coll-wrapper" id="lightbox-{{wf {"path":"slug","type":"PlainText"\} }}"></div>
<script>
window.addEventListener('customEvent', function() {
jQuery(function() {
jQuery('#lightbox-{{wf {"path":"slug","type":"PlainText"\} }}').load("/gallery-nabil/{{wf {"path":"slug","type":"PlainText"\} }} .nested-coll-wrapper", function() {
// Code à exécuter après le chargement du contenu
console.log('Contenu de la lumière chargé avec succès !');
// Vous pouvez ajouter d'autres actions ici si nécessaire
});
});
});
</script>
And add this before the finalFunction declaration on the code I shared earlier.
// Create a custom event
var customEvent = new CustomEvent('myCustomEvent', {
detail: {
message: 'This is a custom event!'
}
});
// Dispatch the custom event on the window object
window.dispatchEvent(customEvent);
I just tried it and it doesn’t seem to work, maybe I made a mistake in the script?
(I’m new to JS )
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push(['cmsload', (listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
async function processRenderingQueue() {
try {
const result = await listInstance.renderingQueue;
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) {
finalFunction();
}
}, index * 10);
});
// Create a custom event
var customEvent = new CustomEvent('customEvent', {
detail: {
message: 'This is a custom event!'
}
});
// Dispatch the custom event on the window object
window.dispatchEvent(customEvent);
function finalFunction() {
window.Webflow ||= [];
window.Webflow.push(() => {
const lightboxComponents = document.querySelectorAll('[lightbox="component"]');
lightboxComponents.forEach((component, index1) => {
let imgUrl = [];
const imagesSource = component.querySelectorAll('.custom-pics');
imagesSource.forEach((imgElement) => {
imgUrl.push(imgElement.src);
});
const thumbnailsOtherContainer = component.querySelector('[lightbox="thumbnails-other"]');
const noOfThumbs = 3;
const thumbsClass = 'img-thumbnails-other';
const thumbWidth = '300';
const thumbHeight = '300';
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);
}
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}`);
let swiperSpeed = 1000;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
swiperSpeed = 500;
}
gsap.to(`.swiper-${index1}`, {
duration: swiperSpeed / 500,
ease: 'power2.inOut',
scrollTrigger: {
trigger: `.swiper-${index1}`,
start: 'top top',
end: 'bottom bottom',
scrub: 1,
invalidateOnRefresh: true,
},
});
new Swiper(`.swiper-${index1}`, {
slidesPerView: 1,
spaceBetween: '100%',
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>`;
},
},
speed: swiperSpeed,
});
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();
});
}
};
});
});
}
} catch (error) {
console.error('Error processing renderingQueue:', error);
}
}
processRenderingQueue();
}]);
</script>
Hey @Shavinz! No worries! you did it just as you should! However, seems that this is only firing for some items… 70-ish to be precise.
Can we try maybe like this? I moved the event lower and inside the finalFunction
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
async function processRenderingQueue() {
try {
const result = await listInstance.renderingQueue;
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) {
finalFunction();
}
}, index * 10);
});
function finalFunction() {
window.Webflow ||= [];
window.Webflow.push(() => {
const lightboxComponents = document.querySelectorAll('[lightbox="component"]');
lightboxComponents.forEach((component, index1) => {
let imgUrl = [];
const imagesSource = component.querySelectorAll('.custom-pics');
imagesSource.forEach((imgElement) => {
imgUrl.push(imgElement.src);
});
const thumbnailsOtherContainer = component.querySelector(
'[lightbox="thumbnails-other"]'
);
const noOfThumbs = 3;
const thumbsClass = 'img-thumbnails-other';
const thumbWidth = '300';
const thumbHeight = '300';
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);
}
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}`);
let swiperSpeed = 1000;
if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
) {
swiperSpeed = 500;
}
gsap.to(`.swiper-${index1}`, {
duration: swiperSpeed / 500,
ease: 'power2.inOut',
scrollTrigger: {
trigger: `.swiper-${index1}`,
start: 'top top',
end: 'bottom bottom',
scrub: 1,
invalidateOnRefresh: true,
},
});
new Swiper(`.swiper-${index1}`, {
slidesPerView: 1,
spaceBetween: '100%',
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>`;
},
},
speed: swiperSpeed,
});
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();
});
}
};
});
// Create a custom event
var customEvent = new CustomEvent('customEvent', {
detail: {
message: 'This is a custom event!',
},
});
// Dispatch the custom event on the window object
window.dispatchEvent(customEvent);
});
}
} catch (error) {
console.error('Error processing renderingQueue:', error);
}
}
processRenderingQueue();
},
]);
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const isMobile = window.innerWidth < 1024;
const zoomMinusButton = isMobile
? document.querySelector('.zoom-minus-phone')
: document.querySelector('.zoom-minus-laptop');
const zoomPlusButton = isMobile
? document.querySelector('.zoom-plus-phone')
: document.querySelector('.zoom-plus-laptop');
const img46Elements = document.querySelectorAll('.img-46');
const heights = isMobile
? ['30px', '50px', '80px', '110px', '130px', '100%']
: ['51px', '85px', '136px', '200px'];
let currentHeightIndex = isMobile ? 1 : 1;
img46Elements.forEach((element) => {
element.style.height = heights[currentHeightIndex];
});
zoomMinusButton.addEventListener('click', () => {
if (currentHeightIndex > 0) {
if (heights[currentHeightIndex] === '100%') {
fadeOutImage();
} else {
currentHeightIndex--;
updateImageHeights();
}
}
});
zoomPlusButton.addEventListener('click', () => {
if (currentHeightIndex < heights.length - 1) {
currentHeightIndex++;
updateImageHeights();
if (heights[currentHeightIndex] === '100%') {
document.getElementById('dams').style.display = 'block';
}
}
});
function updateImageHeights() {
img46Elements.forEach((element) => {
element.style.transition = 'height 1s ease';
element.style.height = heights[currentHeightIndex];
if (heights[currentHeightIndex] === '100%') {
element.style.padding = '20px';
} else {
element.style.padding = '0';
}
if (currentHeightIndex === 2) {
document.getElementById('dams').style.display = 'flex';
}
});
}
function fadeOutImage() {
img46Elements.forEach((element) => {
element.style.transition = 'opacity 0.5s ease';
element.style.opacity = '0';
setTimeout(() => {
currentHeightIndex = 2;
updateImageHeights();
fadeInImage();
}, 500);
});
}
function fadeInImage() {
setTimeout(() => {
img46Elements.forEach((element) => {
element.style.transition = 'opacity 0.5s ease';
element.style.opacity = '1';
});
}, 500);
}
});
</script>
Thanks for your help @Support-Luis, unfortunately it still doesn’t work, this time the images don’t display at all, even on the one where it worked, maybe that can give you an idea?
you can check if you want: Nabil - Photography
Hi, if anyone has an idea to help me? Or if it’s possible to “hire” a Finsweet pro to solve this problem? :((
Hey @Shavinz! I’m sorry I have not gotten back to you yet, the issue is a bit more complex than I expected. I am trying my best to find a solution.
I’ll update when I find something.