custom gallery layout instead of image blocks

Site URL: https://www.ffabooks.com/

I am looking to create a custom gallery as i don’t like the layouts of stock ones.

Quote

would love some custom css that allows the grid to be active and clickable once on an image.

CSS can not make elements clickable. For that you would need JavaScript. If the effect can be achieved.

Image blocks have a lightbox feature.

oh thank you - how do I go about getting Javascript for this? 

The Lightbox is on, but we need to make all images connect so you can click through 

Quote

we need to make all images connect so you can click through

When you say click through do you mean you want the be able to navigate to the next image and see it in a lightbox, kind of like you would with an actual gallery?

Also you've not provided, that I can tell, the URL to the page with the image blocks on it. Without that page it will be hard for anyone to try and come up with code.

I also clarified my previous post. That JavaScript would be needed, if the effect can indeed be achieved. I don't know for sure that it can.

I wonder if it would be possible to restructure an actual gallery into the format you do like. That way you wouldn't have to recreate the more complex functionality, comparatively, of navigating between images in the lightbox.

Yes, exactly what I meant regarding the click through. 

The URL is here https://www.ffabooks.com/jil-sander-ss-96 and the password is Testing 

We are trying to work out if we can restructure an actual gallery, however the formats that they have, they don't have a grid format, our priority is to have it symmetric and even spacing throughout. 

Is this something you can help with? 

Quote

The URL is here https://www.ffabooks.com/jil-sander-ss-96 and the password is Testing

We can't get in.

The Gallery Section set to Gallery Type Grid: Simple seems to be close to what you want in terms of layout.

Could you try this now? I've moved the member area - https://www.ffabooks.com/jil-sander-ss-96

We did try this first - but it doesn't help for the content that we have. It's close but it's not even still

Is this getting closer?

I used the following CSS to make the first image show the whole image.

.gallery-section .gallery-grid-item:first-child .gallery-grid-item-wrapper img {

  object-fit : contain !important;
  
  }

This code is not a solution but example code to show what might be achieved with a gallery section and some CSS.

The spacing is a bit uneven as I'm mixing stock SS images with examples of your images. Your images have a border around them. The stock ones don't. Obviously if you filled a gallery with your images my example image would look even closer to your images blocks.

Thank you for this - it's a little confusing still. Could we hire you to help us at all? 

I have sent you a message.