Image trailing CMS

Hello everyone !

I got an image trailing effect on my Homepage with a CMS.I would like to make these images clickable. They will redirect the user to another page of the website.

How can I do that ?
In the CMS, I put the image inside a link block. But in the custom code of my homepage, I don’t know how to write it correctly in JS…

Thanks for your help !


Here is my site Read-Only: Webflow - Test-tt

Hi,

You can achieve this by adding an event listener to each image element in your custom JavaScript code. When an image is clicked, the event listener will trigger a function to redirect the user to the desired page. Here’s a basic example of how you can implement it:
document.addEventListener(‘DOMContentLoaded’, function() {
var images = document.querySelectorAll(‘.image-class’); // Replace ‘.image-class’ with the actual class of your images

images.forEach(function(image) {
    image.addEventListener('click', function() {
        window.location.href = 'your-target-page-url'; // Replace 'your-target-page-url' with the URL of the page you want to redirect to
    });
});

});

Make sure to replace ‘.image-class’ with the actual class name of your images, and ‘your-target-page-url’ with the URL of the page you want to redirect to. Then, include this JavaScript code in your homepage’s custom code section.

Sofia Choudhry
Sofiachoudhry9@gmail.com
https://www.linkedin.com/in/sofia-choudhry-shopify-certified-expert-1a6b49216/

1 Like

Thanks Sofia, I managed to do it and add an event listener to my images without the logic of CMS.