Layout and images like eshop

[athina_tzan (Athina)]

Hello,

I am trying to make to design similar to a ehso one. I have a sample pitcture below. i was to have an image and next to thumbnails. My question is when I click on the thumbnails how do they become the big image?

Thank You

[nwdsha (Naweed)]

Hi @athina_tzan,

• You can use the tabs widget for this.
• For the tabs navigation, set the bg to the product thumbnail image.
• For the large image, set each tab pane with your 2nd, 3rd & 4th product image.

The best way to find out the CSS settings of a website you like, right click the element in Google Chrome or Safari and the box below will show you how it’s setup.

Otherwise, try this below:

1. Select the container of the tab menu set the following;

height: 366px;
width: 60px;
overflow-y: hidden;
position: relative;

I found the CSS styling settings from Nike http://store.nike.com/gb/en_gb/pd/air-jordan-xxxi-older-basketball-shoe/pid-11164100/pgid-11789608

Hope this helps.

[krubens (Kjell Ruben)]

I made the same on THIS site.

I used interactions.

Its quite a bit of work, but I would just check out the help section and learn interactions first.

I basicly have the thumbnails one the side, the big images is Positions Absolute and on top of each other.
So when you press one thumbnail, it hides all the other images and show the image that is on the thumbnail.
Then you make the same for each thumbnail and image.

HERES the sharelink.