Loopers - Clickable items / Change background

[rafalkukla]

Hi there,
Could anyone point me in the right direction here please;
I am looking for a way to change background if user click on one of the tiles on the left hand side and by doing so, background will change on the right side.

This whole section is made from a looper JSON format, my struggle is how I make them clickable and when clicked, how to change / load background URL corresponding to the right tile / field url which I have in my JSON format.

Has anyone done similar thing before? Could you provide some sort of tip / suggestion / solution please.

With thanks,

[ruenel]

Hello Rafal,

Thanks for writing in! The changes that you want can be done with the following:
1.) With custom Javascript that only triggers when clicking on the tile or button. If you are using WooCommerce, the product gallery has already this feature where in the picture will change as soon as you click on any of the product atribute.

2.) Or you can simply use Loopers and the Slider element. The tiles can be your slide navigation that changes the active slide as you click on the tile. Perhaps this documentation and video can help you:

• Sliders | Themeco Docs
• https://www.youtube.com/watch?v=4wEKA7owiCA

Best Regards.

[rafalkukla]

Thanks. I don’t use WooCommerce, this is just static website which displays products.
I tried with the slider, but it’s getting complicated when it comes to dividing full background and these little icons so when they clicked on, the background changes on the second half of the section.

But thanks any way

[christian]

Hey Rafal,

You’re welcome. The design and feature that you need are possible using the Slider element as my colleague mentioned. You just need to set up the Slide Navigation as the tile or thumbnails and you set your photos as the Slides. Specifically, you need to use or insert the data-x-slide-goto attribute to a Button or Image element in the Slider Navigation to open a specific photo or slide.

If you’re interested in that, review the links provided previously especially the Custom Attributes of the Slider element: https://theme.co/docs/sliders#custom-attributes

Hope that helps.