Selecting the CMS image field using javascript

[eunicela (Eunice)]

Hi! I’m trying to write custom javascript where clicking a button will cause my “screen” to change to a different image, and there are multiple buttons that should trigger different photos stored within a CMS collection, under the image field. I wonder if this is possible, if not, what are some alternatives I can do?

Currently, this is the code I have, clicking the button does trigger something, but it can’t get the proper url.

document.addEventListener('DOMContentLoaded', function() {
    const projectViewWindow = document.querySelector("[el-element='project-view-window']");
    const timelineItems = document.querySelectorAll("[el-element='timeline-bar']")

    console.log("Project View Window = ", projectViewWindow);
    console.log("Timeline Items = ", timelineItems);

        timelineItems.forEach((item, index) => {
            item.addEventListener('click', () => {
            const timelineImageURL = `{{Timeline Images.items.${index}.image.url}}`;
            console.log("clicked = ",timelineImageURL)
    
            projectViewWindow.innerHTML = ''; // Clear previous content
            projectViewWindow.innerHTML = `<img src="${timelineImageURL}" alt="Timeline Image">`;
            });
        });
});

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)