Streaming live at 10am (PST)

Creating a one-page expanding gallery


#1

Hi all,

I am new to webflow and in the process of creating a portfolio website. I would like to have a gallery of projects similar to the one on this site:

http://www.iamjamesmcgill.com/

So basically a grid of images (ideally it's responsive), but when you click on one the gallery expands to show more information about that project. Then it can be closed to return you to the gallery. But I want it to happen on the same page (not link to a seperate page, or open a lightbox window)

I did some searching on the forum and couldn't find anything, but if this has been discussed before, please let me know. I'm at a loss of where to start, or if this is even possible, so any help will be greatly appreciated!


#2

Block links with onpage links leading to each project's section, which is displayed none by default. And a show/hide effect on each section of the portfolio.
I didn't try, but it should work, I think.


#3

Ok, I've got my gallery image linking to the page section with more info. And I understand how to set the section display mode to none. But I can't seem to figure out how to do the show/hide effect when the link is clicked. Can you explain that a bit more please?


#4

here's an Example 3 on Show/hide content http://interactions.webflow.io/
Hope it helps, Ellipsed.


#5

Awesome, thank you very much ilya!


#6

OK I used your link and also found the video tutorial for show/hide content, but I'm having trouble implementing it in the manner that I need. Here is the read-only link to my site:

https://preview.webflow.com/preview/seanparkerdesign?preview=4f2dfafea570ec04597ee734ed63d6eb

I am using the first 'Image Box' in the gallery as my button, and trying to show/hide the section above it called 'Project 1 - Section'. It seems that instead of creating a smooth height animation like in the tutorial, it is delaying by 1000ms and then appearing instantly. I've been trying to figure this out, with no luck. Any ideas what the problem might be?


#7

Hello @ellipsed,
let me try to help you.

First of all you there is really kinda delay on 1st step of "Show/hide" interaction

But even after fixing this part interaction is not smooth.
For make it better I would suggest to use not section changing, but container inside that section. I made a screencast for you so you can easy to follow
https://drive.google.com/file/d/0B-7cg8BSq1Z_bGNTTjFwRU9VUGc/view

Hope it helps,
Anna


#8

Thank you Anna! That worked perfectly, and thank you for doing the screencast, that was very helpful


#9

Glad I could help smiley With screencast explanation and understanding becomes easier.


#10

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