Streaming live at 10am (PST)

Need help creating a 5x5 gallery


#1

Hi there,

I need to create 5x5 galleries like this layout http://www.himroseitandmedia.com/retrocamp/deal.html

If this is too complex, I am ok with just a simpler 5x5 gallery to showcase my images.

Any help is GREATLY appreciated.

I´m open to pay for freelancer dedicated work.

Thanks a lot in advance


Here is my public share link: https://preview.webflow.com/preview/bundle-01?preview=a23288f5274ff517b6e730b39e790c06
(how to access public share link)


#2

Hi @FON

Could you explain more detailed, because on that example site there is 3x4 gallery.

It is not hard to create such structure by using rows and columns, images better to set like a backgrounds on a divs.

Let me know if you need more specific explanations

Cheers,
Anna


#3

Hi thanks Anna :smile:

Yes, I would like to reproduce that exact 3x4 layout, but don´t know how.

Is there some guide on support docs (or video) I could look at?

Thanks a lot for your response, dear :wink:


#4

Unfortunately, there is no docs or tutorials available for create such gallery (at least I do not know such), but I can give you more detailed step-by-step instructions and make screencast how I would do this.

Just one detail: do you need to reproduce that scale effect on hover?


#5

Hi thanks a lot,

That would be SUPER :smile:

Hover effect is nice addon, but not a must.


#6

Ok, lets start.

STEP 1

Create grid from rows and columns.
1) Create div inside the Section and give it class "gallery grid". It will let you easier control gallery (copy/paste).
2) As we have in the example, we need 3 rows with 3 or 4 columns each. So drag and drop row inside the "gallery grid".
Every row has 12 proportional sections and automatically build columns depends on quantity of this sections (which you can control). So we will have:
-- 1st row = 3 columns: 3 sections, 3 sections and 6 sections.
-- 2nd row = 4 columns: 3 sect, 3 sect, 3 sect, 3 sect
-- 3rd row = 3 columns: 3 sect, 6 sect, 3 set.

Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_ZVJNSHRZUTlJOVk/view


#7

WOW :smile: heart_eyes:

Amazing job!

I should send you a beer :wink:


#8

STEP 2

1) Visually we can see that every column will take about 20% of screen width. So for create square images columns have to have height = width. In this case will use VW measurements ( viewport width), 1 vw = 1 % of width
So give rows class "gallery row", width= 20vw and a little bit bottom margin

2) give to every column class "col" and make sure that column height = 100%

3) put lightbox widget inside the column, give it class "gallery lightbox", make it display: block and height: 100%
also make it position: relative and overflow: hidden

4) image inside the lightbox - make class "gallery image, position: absolute, aligning: full, height:100%

Then you can copy/paste lightbox inside every column.

5) for wide images (which is in the 6 sections column) add combo-class "wide" and give it a bit different settings: width: 100%, height: auto

Sure add images inside the lightboxes

video: https://drive.google.com/file/d/0B-7cg8BSq1Z_UWZ0Z3NYc3RQbDQ/view


#9

Really :kissing_heart:

Amazing job with killer videos

Thanks a lot


#10

STEP 3

Tunes. Create interaction for scale-hover effect.

Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_TkVieE1uQmh1b1k/view

UPDATE TO STEP 2:
make lightboxes width = 98% and center them. It will create space in between images and will not effect "square look" so much

Regards,
Anna


#11

Really really appreciate this, Anna :smile:

Such an amazing and detailed response :smile:

Do you offer Freelancer services?

Thanks a lot, God Bless Ya!


#12

:smile: Always welcome. Glad I could help.
Merry Christmass :smiley: :christmas_tree:


#13

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