Customize Lightbox Gallery/Gallery Box

First of all: Why different names? Called “Lightbox Gallery” in plugins catalog, but “Gallery Box” in the builder? :slight_smile:

I’ve finally managed to create a masonry gallery with iterable images from the CMS, with help from both the devs and this community! :heart: Now I need to customize the look of the lightbox when viewing the gallery. First I would like the box to fill the viewport, and preferably an option to go full screen :slight_smile: However, I need to view the images lager then how they are represented on the page.

I’ve tried to edit the CSS code by just creating the same class for i.e “swiper-button-prev” and set the color value to !important - but not adding it to any div or so. I added a tag for any object in the builder to create the class since I got an error by trying to use “Create class” feature.
Error I got was:

“IN data error. ‘tag’ is passed as ‘string’ while expecting ‘boolean’.”

Anyway, it didn’t work - and now I have no clue on how to modify the look of the box :slight_smile:

Any ideas? :grin:

following… :grinning: I’m currently stuck on the same issue.

How did you get the Masonry grid to work? It hasn’t worked for me so far.

Checkout this post, this is exactly what I used :slight_smile:

Got it. This is done with CSS. However, this isn’t the true masonry layout as shown in the screenshot. :grin: This approach works well when the order of the items doesn’t need to strictly follow a left-to-right sequence. But this is often the case when telling a story with a series of images, like for wedding images.

If I remember correctly is going down from top left and continues at top in next column. There are probably ways of doing it in a specific order as well. I’m doing a site with wedding images now, and it works for me :slight_smile:

If you don’t mind, would you show how you solved it? I have a large wedding website currently built with Webflow (www.miandla.com)but am working on a product webpage that I’d like to create with Divhunt. And there i’m using now also a Image-Gallery.

What is it that you don’t manage to solve that you want me to show? :slight_smile: My galleries are going from top left, downwards and then continue in the next column going downwards and so on. I have 3 columns. They are not going from left to right.

Maybe @dejan know how to make them go from left to right instead of from top to bottom?

As far as I know, there is currently no native CSS support for Masonry. There is a new CSS specification, but it is practically unsupported in any current browser.

Well, we all know it’s doable. There are tons of Wordpress Plugins doing exactly this so… :slight_smile:

I will take some time in few days and create a plugin for masonry. Hopefully there is some good js library for that.

1 Like

Very appreciated! :star_struck: Would be great to be able to customise some things like sorting order, even custom order for 100% control when doing stroytelling with images? I don’t really know what else you would want to include in the plugin since it’s “only” a way of listing a table :slight_smile:

Really looking forward to it! :grin::sparkler::tada:

that would be great. but no hurry. :slight_smile:

i’ve used in the past the library from here:
https://masonry.desandro.com
there is also a cdn for the script.

Besides the masonry script, he has some other really good stuff to play with.

btw: Happy New Year! :dizzy:

Btw, I tried creating this plugin, I invested like 4-5 hours, but all libraries are big sh** honestly. :confused: When I get more time, after a marketplace and website launch, I will try to create masonry from scratch.

1 Like

It’s awesome that you don’t give us shit just to deliver :grin: I rather wait a little to get something good/great/awesome instead of dealing with :poop: :joy:

OH, sorry to hear that. I had a good experience using the above masonry script directly in Webflow. But I’d rather wait a bit longer than deal with any :poop: :crazy_face:.

This looks interesting: MiniMasonry.js