i’m pretty new to webflow, but i’m sure this feature shouldn’t be that hard to make.
basically i’m designing a product detail page, which is split in two:
left side of the screen is a big preview of the shot and the second one is thumbnails and some description with an option to select size etc and buy the product.
what i really want to make is an interaction : when thumbnail picture is clicked - to appear on the left side in full size, but the page would always load with the first image thumbnail.
please check it out and could someone please help me figure it out? would be suuuuper grateful!
here’s the link, idk really how to link to that particular page but you can get there through pages it’s called “Products Template” and then select item “cross earhoops”
If I understand well you are trying to achieve a sort of custom “lightbox”.
Your approach with the big preview big containing all the big images is one solution.
The way I would think the setup of interactions is similar with yours with show 1 or show 2 interaction with one little difference.
I would add all the images in this interaction and make sure I’m hiding them regarding of which thumbnail was clicked.
Here are some screenshot which hopefully make sens.
Thank you sooooo much Max, this absolutely worked out!!!
I have one more request
if it won’t be much trouble, could you explain how can i make the same effect but with overflow set on scroll, please if you got the time for that check out the link.
when i click on the thumbnail (like in the first case) and then have the div block (supposedly associated to the thumbnail) appear in view (scroll to it automatically)
basically now i have a scroll preview of all product images, i attached a gif so you could preview the way it’s moving.
All the big images on the left are the div’s and they all are stacked inside another div called “preview big”. in display section the overflow is set to scroll
please see the screenshot for more details.
the interaction i’m going for is to click on the thumbnail of product picture 03 (for example) and then have it shown (automatically scrolled to or just displayed fully) on the left side where the full size image is (inside “preview big” div block)