How do I make a photo gallery with a lightbox preview on the same page?

Store Design
, , ,
1

Hi all,

I’ve been trying to add a photo gallery to my site using the custom liquid and some coding I’ve found online. Currently, the photos are in a square, 3 column grid which I would like to keep. I’ve managed to make the images clickable so that they can be opening to full size, but it opens them on a new page instead of opening them on the same page. I’d love to be able to have them open on the same page and include an “x” button to return to the full gallery.

Screenshot 2024-04-18 at 11.23.29 AM.png
Screenshot 2024-04-18 at 11.23.29 AM.png2864×1436 1010 KB

Here is the custom code I currently have. Thank you in advance!!!

Photo Gallery .gallery { display: grid; grid-template-columns: repeat(3, calc(35% - 40px)); grid-gap: 20px; margin-top: 0px; /* Top margin */ margin-right: 40px; /* Right margin */ margin-left: 40px; /* Left margin */ margin-bottom: 60px; /* Bottom margin */ } .gallery img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1; /* This ensures the images are squares */ cursor: pointer; /* Add cursor pointer to indicate the image is clickable */ }

/* Close button style */
#lightboxClose {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
color: #fff;
font-size: 24px;
z-index: 9999;
}

Landscape

<a

×
2

Hi @spogasart ,

Here is the reference for the gallery lightbox.
https://codepen.io/connah99/pen/BaEoxPB

Please have a look.

Thank you

3

Hi Sandeep,

Thank you for your response. When I tried entering the HTML code provided, it made the images very large and not in a grid.

4

Hi @spogasart ,

We do need to add the custom css.

Thank you

5

Hi,

Where would I add in the lightbox portion of code to the existing code I have? Do I need both the html and the CSS?

Thank you.

6

Hi @spogasart ,

You need to add both html and css.

Let me know if you need help with custom coding.

Thank you

7

Hi,

I added the html and css codes in the custom liquid and custom css sections
of my page but it said the Custom CSS has a size limit of 500 characters.
Is there a workaround?