Hi there, i’m using the CMS load with my collection list, where I have images with captions, and I’m using a script to fetch the title of the cms item as the caption of that image in a lightbox element on the page
The problem is that when I load more items, the newly loaded items dont get the caption displayed like the ones that are already there when the page loads
So basically the script is not working for newly loaded items
I already have the attribute fs-cmsload-resetix=“true”
Here’s my read-only link: Webflow - Alalong
Here’s the published page: Projects | Rendering & Visualization
I’d be very grateful to receive some help on this!
Hey @gabriel.babus! You will need to use the CMS Load callback function to rerun the snippet each time new items are rendered. The basic structure is this
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
// Code here will run for the first page of the collection list
listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
// Code here will run each time we render more
// items by pagination, infinite scroll or load more
});
},
]);
</script>
Let me know if you face any issues and I’ll be happy to help!
Thanks so much for the reply, Luis. Would you be kind and help me tailor this CMS load callback function to my use case, including the script I need to fire for the caption text to appear?
I’d be extremely grateful!
Hey @Support-Luis any chance I could get your help on this? Let me know! Thanks a ton
Hey @gabriel.babus! Sure!
Can you please help me find the code you already have running? I can’t seem to find it on this page → Projects | Rendering & Visualization
Hey @Support-Luis how’s it going? Apologies for the late reply here
Here’s the code I need to make it work along with the CMS load attributes solution
It’s installed in the head of the page
THanks @gabriel.babus! I am unfamiliar with Sygnal Attributes, so I’ll need more info here. What are you using the library for? Do you know if they offer an API callback function?
Also a Loom to show the elements that get the caption correctly and the ones that don’t would be very useful
Thank you!
Hey @Support-Luis the script is so I can make the ALT text of the image from the multi-image CMS field, the caption of the image inside the lightbox
See the screenshots
That’s it
Any chance you could have a look, @Support-Luis ? Thanks in advance!
Hey @gabriel.babus! Could you please share a test page where the list is set with CMS Load? I see the script commented out as well as the list loading all at once
Hey @Support-Luis how’s it going?
Here’s the page with the CMS load script active, and my script for the issue at matter
So once you click “next” to load more, the items that appear don’t trigger the script that adds the alt text as the caption of the image, inside the lightbox when you open
Can you help me out here? I’d be extremely grateful!
Cheers
Hey @gabriel.babus! I can see it now, I have to look and see if SA5 provide a way to initialize their library with code.
The final result should look something like this
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
sa5.init(); // supposing there is an access to this
});
},
]);
</script>
I’ll check and get back to you
Thanks @Support-Luis appreciate the support a ton!
I’ve added the script above and published (same page) but it doesn’t seem to work, out of the box
I’m sorry @gabriel.babus! That was not supposed to be a working code!
I am still looking into the SA5 library trying to find an init function. I am not sure if this library has an API where we can interact with the scripts as we do for CMS Load.
I’ll keep looking and get back to you
Ohh, got it @Support-Luis . I’ll be waiting for your reply
Thanks so, so much for taking the time to help me with this, regardless!
Hey @Support-Luis how’s it going? Hope you’re having a great week!
Luis, any chance you could have a look at this thing by the end of this week? I’d be super grateful
Hello @gabriel.babus! Apologies for the delay. I did find a code line here that is supposed to reset the Lightbox functionalities, but it seems to not be working as it should, as I get an error every time I try to use it.
In theory, the code to reinit the captions would be this
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
const [listInstance] = listInstances;
listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
window.sa5.Sa5Lightbox.resetLightbox();
});
},
]);
</script>
I’ve reached out to SA5 support but I’ve gotten no answer. You could give reaching out a shot as there is not much I can do I am afraid