Please help me. Is there no other way than to use lightbox?

I apologize in advance if I don’t make sense. I’m having trouble trying to describe this.

As you can see in this picture, I was finally able to figure out how to have the variant pictures change as you select different colors. However, that brought me a new problem.

As you can see in this picture, this is how I want it to work. Where you select the thumbnail image and it changes the main image to the selected thumbnail image. To make this work, this was how I did it. For example, you select the 2nd thumbnail image. Once clicked, it hides the main and 3rd image and only shows the 2nd image. I know I can do lightbox, but I don’t like how it looks and it’s not what I had in mind of how i want the product page to look. I was able to figure out how to do the variant pictures by using the cms collection list and selected ‘more images’ for where to get the product image from.

As you can see in the picture, that’s how i have it set up in the product setting.

If i’m correct, the problem should be because the images aren’t connected. What I mean by that is that the variant images are under ‘more images’ while the main, 2nd, and 3rd images are on it’s own thing? Anyone know how to solve this? If i can’t figure this out, my only option is to remove the model images, and only show the main image of the product.

Here is my site Read-Only:

https://preview.webflow.com/preview/aku-no-mori?utm_medium=preview_link&utm_source=designer&utm_content=aku-no-mori&preview=e34e2854123d3e3bfaf421cdab2992a4&pageId=60095cb16ea2bdfbd15991da&itemId=60095cb16ea2bd716f59925d&workflow=preview

My published site:

www.akunomori.com