# CMS Load item not displayed/accessible

**URL:** <https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613>\
**Category:** Attributes\
**Created:** [March 10, 2024, 12:51am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613 "2024-03-10T00:51:14Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 10, 2024, 12:51am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/1 "2024-03-10T00:51:14Z")

</div>

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](https://preview.webflow.com/preview/test-36651c?utm_medium=preview_link&utm_source=designer&utm_content=test-36651c&preview=8181807b9914f969f7fe54b4cef928b9&pageId=65ea0315c488eea7a9bf6e48&locale=fr&workflow=preview))

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 7:41am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/2 "2024-03-11T07:41:04Z")

</div>

Hey @fdamien83! 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 🙂

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 8:21am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/3 "2024-03-11T08:21:02Z")

</div>

Hey @Support-Luis, sorry for this mistake about the link, here is the good one: [Webflow - Arvin Studio - Portfolio](https://preview.webflow.com/preview/test-36651c?utm_medium=preview_link&utm_source=designer&utm_content=test-36651c&preview=ce2e0b6c72339824a3527e8d098d981d&pageId=65ec7559b1c7cb321b3d4f9f&locale=fr&workflow=preview)

and yes Pagination is already enable 🙂

thanks in advance for your feedback!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 9:24am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/4 "2024-03-11T09:24:03Z")

</div>

Hey @fdamien83! 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 🙂

```js
<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>

```

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 9:29am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/5 "2024-03-11T09:29:19Z")

</div>

Okay i will try ! and let you know 🙂

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 9:41am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/6 "2024-03-11T09:41:10Z")

</div>

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](https://test-36651c.webflow.io/nabil-photography)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 10:39am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/7 "2024-03-11T10:39:43Z")

</div>

Can you add `fs-cmsload-resetix="true"` to the list setup? This should get the interactions back up and running 😉

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 10:49am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/8 "2024-03-11T10:49:25Z")

</div>

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.

 ![Capture d’écran 2024-03-11 à 11.46.30 AM](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/9/953bc0a4cb7fa48846681178a03e77edf7d3fb47.jpeg)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 11:11am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/9 "2024-03-11T11:11:32Z")

</div>

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 🤔

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 11:19am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/10 "2024-03-11T11:19:25Z")

</div>

Yes you’re right !

I’ll have to add your script to the embed, won’t I?

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 11:29am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/11 "2024-03-11T11:29:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 11:34am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/12 "2024-03-11T11:34:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 11:45am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/13 "2024-03-11T11:45:46Z")

</div>

Let’s try this.

We will create a custom event that will be fired from the Callback we use to animate the items.

```html
<div class="nested-coll-wrapper" id="lightbox-{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"></div>

<script>
  window.addEventListener('customEvent', function() {
     jQuery(function() {
         jQuery('#lightbox-{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}').load("/gallery-nabil/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }} .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.

```js
// 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);

```

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 12:03pm UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/14 "2024-03-11T12:03:35Z")

</div>

I just tried it and it doesn’t seem to work, maybe I made a mistake in the script?  
(I’m new to JS ☹ )

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 11, 2024, 4:44pm UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/15 "2024-03-11T16:44:41Z")

</div>

Hey @fdamien83! 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`

```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);
          });

          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>

```

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 11, 2024, 5:31pm UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/16 "2024-03-11T17:31:00Z")

</div>

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](https://test-36651c.webflow.io/nabil-photography)

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 13, 2024, 8:32am UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/17 "2024-03-13T08:32:36Z")

</div>

Hey @Support-Luis, do you have any new idea with my issues ? ☹

---

<div class="post-metadata">

**Author:** ![fdamien83](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/fdamien83/32/2082_2.png) [@fdamien83](https://forum.finsweet.com/u/fdamien83)\
**Post date:** [March 18, 2024, 5:10pm UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/18 "2024-03-18T17:10:15Z")

</div>

Hi, if anyone has an idea to help me? Or if it’s possible to “hire” a Finsweet pro to solve this problem? :((

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [March 21, 2024, 6:11pm UTC](https://forum.finsweet.com/t/cms-load-item-not-displayed-accessible/2613/19 "2024-03-21T18:11:27Z")

</div>

Hey @fdamien83! 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.