Shopify themes, liquid, logos, and UX
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.
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;">×</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>
Hi @spogasart ,
Here is the reference for the gallery lightbox.
https://codepen.io/connah99/pen/BaEoxPB
Please have a look.
Thank you
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.
Hi @spogasart ,
We do need to add the custom css.
Thank you
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.
Hi @spogasart ,
You need to add both html and css.
Let me know if you need help with custom coding.
Thank you
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025