First and foremost you guys are brilliant and awesome. I have used Macaw, Edge Reflow and even dreamweaver cc 2015 and I choose you guys over them any day in the current state of all of the packages for responsive design.
I am in desperate need of help however. I need a gallery that fades with thumbnails on the bottom similair to what I have inserted in my clients website here http://www.michaelbambino.com
The gallery I currently use is great, but when I go to use the code source from the creator to make it full screen the full screen icon (arrows) is always off a little. The source code seems to be a little shaky to me. The client loves it right now, but he is asking about making it where when clicked on the main gallery image “the big image” to have it pop up full screen (kind of like a lightbox). I don’t really see the options I need in webflow to allow me to do so. It seems either webflow has it lightbox and not moving or no click on fading gallery to expand the image?
Any suggestions, feedback or design examples would be great guys! Thank you so much and look for me to upgrade my account from regular to pro here very soon!
I smacked code into the div element after the publish, so the current gallery is not live. However, if I could do this process in webflow it would sure save me a heck of a lot of time and pain in the butt. The project file is: Webflow - dev2mbphoto
I would love to be able to replicate the gallery I have on http://www.michaelbambino.com/weddings.html if all possible in WebFlow. Please help, and let me know your thoughts.
It’s possible with the lightbox, but I think something has to be clicked for the lightbox to open full screen. That’s what it’s called a lightbox rather than a Gallery.
Now, depending on how many images you need to display in this gallery, you have different options. I see your page has close to 30 images.
You could use a Tab widget, with the tab interaction trigger for fade in/out images (slides). But I don’t see how to make the thumbs bar scroll on hover. This would require JS code and I’m not skilled at it.
You could craft it entirely manually, with interactions. And you can make it work with only 1 interaction, with each element containing 1 thumbnail and 1 full image, so you can limit the interaction to the local element that’s clicked. However you’d still need JS to animate the thumb bar. (note here, as a user and designer, I grew to hate these sliding components. It’s slow and unpractical, I prefer several rows of thumbnails)
You could also rely on something external, like an embeded Flickr gallery or another gallery component from the web.
If you want to make it manually, the structure should be as follow: (galery = galery viewport (big image zone) + thumbnails bar)
section
– container | position:relative and a fixed height (galery height)
– – div | (1 galery item) NO POSITION
– – – image | thumbnail | display:inline-block +top padding = the height of the gallery viewport
– – – image | large image | position:absolute top left + display:none opcity:0
Now repeat this element, the thumbs will stack against each other and the big images positions will always be references by the container.
Create an interaction that will, on-click:
hides the big image div (no limitation, will hide any visible big image)
show the big images (display:block + opacity 100% in 350ms, with limitation to siblings)
Wow thank you for the detailed support. I know this is asking quite bit and if you don’t have the time I understand, but could you show me an example of how you would do so? It would really help me.
