Help with an unusual lightbox layout please!

Hi everyone,

I’ve had a think about your idea @MinewireNetwork about laying out the images in different sizes across the page for the gallery. I’m trying to figure out how to lay the light-boxes out in different sized squares, so that when the screen scrolls up, the overlays show, so that people know to touch on it on mobile devices.

Could anyone take a look what I’ve done so far and make any recommendations. Is what I’m doing the long winded way round it? I hope you can see what I’m trying to achieve?! I kind of understand the parent - child -relative - absolute rule from @vincent - you’re a legend, do you ever sleep? But I’m not sure the way I’ve laid the text out inside the overlay is correct (I’ve just added a load of margin to the top of the heading).

https://preview.webflow.com/preview/penguin-suit-hire-fixed?preview=837e132bdd9b4ac3c4c9ea4023cb3daf

I appreciate you’re all busy, and help would be greatly welcomed as always!

Mark

1 Like

No :smile:

I see the galery sections with two squares for the lightboxes.

The way you positionned the text works, but it’s a bit dirty. You can do this:

https://v.usetapes.com/4pociy4qrS

For the rest, can you explain a bit more?

Ah that’s brilliant, thank you Vincent! I’ll watch a few more times, but I get the idea. I didn’t know you could add a background image to the lightbox AND a gradient. It felt dirty when I added that much margin to it to align, but couldn’t get my head around which way to do it.

The effect I’m trying to create is like a mosaic of photos from one side of the screen to the other made up of different sized images, preferably square but not important. As I want the site to be image heavy, I wanted a gallery that was a little different to the usual scrolling ones, or just images in a row, but still intuitive to use.

[quote=“vincent, post:2, topic:22310”]
https://v.usetapes.com/4pociy4qrS
[/quote] …well that’s just amazing.

Vincent to the rescue as always!

Do you mean something like this?

1 Like

:anguished: YES!!! :smile: :heart_eyes:

I’ve put a slider in there for now, but I’d happily change it! Could you direct me to a tutorial please, or just give me a hint as to how that layout is created.

Thank yoooou!

1 Like

Here we go:
http://forum.webflow.com/t/masonry-grid-pinterest-in-webflow-created-by-css-only/21693

So you still can use lightboxes for your images.
Feel free to ask if you need more help.

Cheers,
Anna

Thats exactly what I was looking for, that’s great Anna thank you very much! :smile: :smile: :smile:

It’s a bit complicated for me at the moment, but I’ll keep playing with it on my sandbox site until I have it just right!

Mark

OK, I found that I could view it in the sandbox mode. I’m struggling to understand a couple of elements…

In your explanation, you say to change the CSS code to match whatever the name of the container is, yours is set to masonry_grid but you have no containers by that name (that I can see anyway).

I also can’t see how you got the images in there, as the div boxes have no background image set, and there is no image box inserted, just a text overlay. I’m missing something that’s probably really obvious, but I hope you could clear that up for me? Appreciate your patience!

The nice thing is, I’m starting to understand code layout a little better each day! Just a bit though. :neutral_face:

“masonry_grid” is ID, not class name


Also you can see in the navigator where is images sits :wink:

1 Like

I have no idea why I didn’t see the images, but yes, I was getting ID and class confused. See, I said it would be something stupid I did :upside_down_face:

It works perfectly! Thank you, and I’ve even managed to edit the code to make it suit the look I was after too.

1 Like

Great, congratulations on next step in your project! :blush:

P.S. You did nothing stupid, it is always harder to get digging in somebody’s else code/project :wink:

Cheers,
Anna

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