<div class="gallery-row">
  <img src="https://placehold.co/400x300/3b82f6/ffffff?text=1" class="thumb" onclick="openLightbox(this)">
  <img src="https://placehold.co/400x300/ec4899/ffffff?text=2" class="thumb" onclick="openLightbox(this)">
  <img src="https://placehold.co/400x300/10b981/ffffff?text=3" class="thumb" onclick="openLightbox(this)">
</div>
<div id="lightbox" class="lightbox" onclick="this.style.display='none'">
  <span class="close-lb">&times;</span>
  <img id="lbImage" class="lb-content">
</div>

.gallery-row {
  display: flex;
  gap: 15px;
}
.thumb {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.thumb:hover {
  transform: scale(1.05);
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
}
.lb-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.close-lb {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

function openLightbox(img) {
  const lb = document.getElementById("lightbox");
  const lbImg = document.getElementById("lbImage");
  lb.style.display = "flex";
  lbImg.src = img.src;
}

Back to Snippets

Image Lightbox Gallery JS

Show off your photos in full detail with this lightbox gallery. Clicking an image expands it to fill the screen with a darkened background, which provides a distraction-free viewing experience.

526

#javascript

#css

#lightbox

#gallery

#image

#modal

#overlay

/HTML *CSS ()JS Output Live Updates

Image Lightbox Gallery JS

Share Code Snippet