This code creates a responsive photo gallery grid with a lightbox for image viewing. It adjusts the layout for various screen sizes. The lightbox enables users to view images in an overlay window.
You can use this code on your website to showcase images in a stylish and responsive grid layout. It enhances user experience by allowing them to view images in a convenient lightbox format. The code ensures your photo gallery looks great on different devices, attracting and engaging visitors.
How to Create a Responsive Photo Gallery Grid With Lightbox
1. First of all, load the Glightbox CSS by adding the following CDN links into the head tag of your HTML document.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css'>
2. Create the HTML structure for your gallery. Within the <div class="photos-grid-container">, add image elements <img> with their respective source URLs. You can add as many images as you want.
<header>
<h1>Responsive Image Grid with Lightbox Gallery (GLightbox)</h1>
</header>
<main>
<div class="container">
<div id="gallery" class="photos-grid-container gallery">
<div class="main-photo img-box">
<a href="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&h=1200&&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1800&h=1800&&q=80" alt="image" /></a>
</div>
<div>
<div class="sub">
<div class="img-box"><a href="https://images.unsplash.com/photo-1588186941799-f9a4fc54ff1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1588186941799-f9a4fc54ff1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&h=900&q=80" alt="image" /></a></div>
<div class="img-box"><a href="https://images.unsplash.com/photo-1593409981958-562665d407cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDF8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1593409981958-562665d407cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDF8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&h=900&q=60" alt="image" /></a></div>
<div class="img-box"><a href="https://images.unsplash.com/photo-1587538639284-aec1076ba9c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTB8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1587538639284-aec1076ba9c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTB8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&h=900&q=60" alt="image" /></a></div>
<div id="multi-link" class="img-box">
<a href="https://images.unsplash.com/photo-1591557304122-513e396f9feb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzZ8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image">
<img src="https://images.unsplash.com/photo-1591557304122-513e396f9feb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzZ8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&h=900&q=80" alt="image" />
<div class="transparent-box">
<div class="caption">
+3
</div>
</div>
</a>
</div>
</div>
</div>
<div id="more-img" class="extra-images-container hide-element">
<a href="https://images.unsplash.com/photo-1523450001312-faa4e2e37f0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1523450001312-faa4e2e37f0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fHdvbWVuJTIwc2hvcHBpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&h=900&q=60" alt="image" /></a>
<a href="https://images.unsplash.com/photo-1484081064812-86e90e107fa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHx3b21lbiUyMHNob3BwaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1484081064812-86e90e107fa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHx3b21lbiUyMHNob3BwaW5nfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&h=900&q=60" alt="image" /></a>
<a href="https://images.unsplash.com/photo-1466695108335-44674aa2058b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&h=1200&q=80" class="glightbox" data-glightbox="type: image"><img src="https://images.unsplash.com/photo-1466695108335-44674aa2058b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&h=900&q=80" alt="image" /></a>
</div>
</div>
</div>
</main>
<footer>
<p>Made with ♥ by <a href="https://elissavet.dev" target="_blank">Elissavet</a>.</p>
</footer>
3. Create a separate CSS file (styles.css) and define the styles for your photo gallery grid. This includes setting up the grid layout, image styling, and lightbox transitions.
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap");
html,
body {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
font-size: 18px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header,
footer {
text-align: center;
margin: 1rem 0;
}
.photos-grid-container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 0;
align-items: start;
}
@media (max-width: 580px) {
.photos-grid-container {
grid-template-columns: 1fr;
}
}
.photos-grid-container .img-box {
border: 1px solid #ffffff;
position: relative;
}
.photos-grid-container .img-box:hover .transparent-box {
background-color: rgba(0, 0, 0, 0.6);
}
.photos-grid-container .img-box:hover .caption {
transform: translateY(-5px);
}
.photos-grid-container img {
max-width: 100%;
display: block;
height: auto;
}
.photos-grid-container .caption {
color: white;
transition: transform 0.3s ease, opacity 0.3s ease;
font-size: 1.5rem;
}
.photos-grid-container .transparent-box {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.photos-grid-container .main-photo {
grid-row: 1;
grid-column: 1;
}
.photos-grid-container .sub {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0em;
}
.photos-grid-container .sub:nth-child(0) {
grid-column: 1;
grid-row: 1;
}
.photos-grid-container .sub:nth-child(1) {
grid-column: 2;
grid-row: 1;
}
.photos-grid-container .sub:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.photos-grid-container .sub:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.hide-element {
border: 0;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@media screen and (min-width: 1280px) {
.container {
margin: 0 auto;
width: 1250px;
}
}
4. Now, load the Glightbox JS by adding the following CDN link before closing the body tag:
<script src='https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js'></script>
5. Finally, initialize the lightbox functionality by adding the following JavaScript code between <script> tag or external JS file. You can customize the lightbox settings according to your preferences.
//External JS: https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js, see settings
const lightbox = GLightbox({
touchNavigation: true,
loop: true,
width: "90vw",
height: "90vh"
});
That’s all! hopefully, you have successfully created a Responsive Photo Gallery Grid With Lightbox on your website. If you have any questions or suggestions, feel free to comment below.
