Streaming live at 10am (PST)

Product detail page image interaction on hover! 🙏


#1

hi everyone,

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”

here’s the link
https://preview.webflow.com/preview/artems-stellar-project-ed1225?preview=d16151d3d05bf217b5b97e3098be7063

also providing some screens with a bit more graphic explanation :slight_smile:

PS sorry if i didn’t explain it well, please feel free to ask more questions if it needs to be clarified !


#2

Hi @Artem,

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.

I hope it helps.

Max


#3

Thank you sooooo much Max, this absolutely worked out!!!
I have one more request :slight_smile:

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)

https://preview.webflow.com/preview/artems-stellar-project-ed1225?preview=d16151d3d05bf217b5b97e3098be7063

the page i’m talking about can be found in the same directory as the previous - “Products Template” and then select item “cross earhoops”

thank you soooo much once again !!!


#4

I’m not sure I understand what you mean by overflow scroll and scroll to it in this case.

Could you describe more precisely or share some screenshots and/or examples of the desired result?


#5

Thank you for your reply!

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)

50 scroll-interaction


#6

Ok I may have a solution for you but it will change a bit the structure of your page.

I would use the same technique I’m describing in my slider tutorial.
Basically it’s the same technique except the slides are vertical instead of horizontal.

The only other setting that would be different will be to set the overflow of the slider mask to scroll instead of hidden and you should have the desired result.

Let me know if you need extra help to set it up.

Here is the thread where you can find my tutorials :slight_smile:


#7

thank you very much!!
i’m gonna try and do it right away :blush: