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

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

spogasart
New Member
4 0 0

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<style>
.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;
}
</style>
</head>
<body>
<div class="gallery">

<a href="image1.jpeg" data-lightbox="gallery" data-title="Landscape"><img src="image1.jpg" alt="Landscape"></a>

<a 


<!-- Add more images here -->
</div>

<!-- Lightbox2 JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<!-- Close button (hidden by default) -->
<div id="lightboxClose" style="display: none;">&times;</div>

<!-- JavaScript to show/hide close button -->
<script>
// Show close button when lightbox is opened
document.addEventListener('click', function(event) {
if (event.target.dataset.lbType === 'image') {
document.getElementById('lightboxClose').style.display = 'block';
}
});

// Hide close button when lightbox is closed
document.addEventListener('click', function(event) {
if (event.target.classList.contains('lb-close')) {
document.getElementById('lightboxClose').style.display = 'none';
}
});
</script>

</body>
</html>

Replies 6 (6)

LuffyOnePiece
Shopify Partner
650 93 119

Hi @spogasart ,

 

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

Please have a look.

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
spogasart
New Member
4 0 0

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. 

LuffyOnePiece
Shopify Partner
650 93 119

Hi @spogasart ,

 

We do need to add the custom css.

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
spogasart
New Member
4 0 0

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.

LuffyOnePiece
Shopify Partner
650 93 119

Hi @spogasart ,

 

You need to add both html and css.

 

Let me know if you need help with custom coding.

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
spogasart
New Member
4 0 0
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?