Streaming live at 10am (PST)

Fellow Webflow Experts: Can this be done in Webflow?


#1

A client of mine is wanting to create an image gallery similar to this links: http://www.tn3gallery.com/

I know I can also insert the code, however I would love to be able to do this directly in Webflow if possible.

Needs:
Thumbnails at the bottom that slide to the next and displays the thumbnail in a larger view port. This viewport then sits on top of the smaller thumbnails.

It can be simple transitions - doesn't have to be complex.

Any idea's, hints, tips, video tutorials, or comments is very very welcome!

Thanks Guys!

SeanK


#2

Hi @seank, pretty interesting idea. But if you have many pictures it can end up with some complicated interactions.


#3

Hey @sabanna,

It would only be probably 10 images. They wouldn't need a complex interaction between images, a simple fade or image change would work.

Does that make sense?


Thanks Sabanna,

SeanK


#4

I will try some ideas and will back to you.


#5

Wow, that would be awesome!

Thank you so much @sabanna!


#6

Ok, what about this? http://amazing-gallery.webflow.io

Thumbnails not clickable, I don't think it is possible to do them so.


Auto Sliding Thumbnail Gallery
#7

@sabanna - that is perfect!! How is it on the responsive side of the things?


#8

It is not responsive now confused there is issues with size in %
You can try make it adaptive, mean that every screen view you will have to change sizes of elements
Here is preview link, you can see how it is done:
https://preview.webflow.com/preview/amazing-gallery?preview=86de47ba33d5c71f53574b8b4074862e


#9

Can you please give me a little more detail on how you created this. I am looking at the preview and I am slowly getting it, but if you could please provide a small step by step I would greatly appreciate it.


#10

Well, here is main steps:
1) create slider and give classes to all elements (so you could manipulate them)
2) make slider height bigger that slider mask height
3) inside the slider, between mask and navigation, add div (div-thumbs), give it position: relative and overflow: hidden.
4) inside div-thumbs add 2 divs with position: absolute, one - overlay (div-overlay) , another one - container for tumbnails (div-thumbs-wrap)
5) div-thumb-wrap will contain thumbnails, since there is 10 pics, I gave thumb width 10%
6) div-overlay styled with semi-transparent borders, you will have to count it depends on thumb size. Leave enough space for only one thumbnail fully visible.
7) nexst step - create interaction on every slide:
trigger - slide,
affect different element - div-thumb-wrap
for every different slide inside the interaction move div-thumb-wrap to position when right thumbnail will be fully visible

Hope I was able to explain correct smiley


#11

Wow @sabanna - I can't think you enough. I will send you an editable arrangement sometime!


#12

LOL

Not quiet sure what you mean here, but welcome smiley


#13

edible i meant... lol sorry.. i have editing on my mind.


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.