Creating a Full-Screen Lightbox Image Gallery for Stunning Visuals

byCodepen.tech -
0

Introduction 



Creating a Full-Screen Lightbox Image Gallery for Stunning Visuals

A full-screen lightbox image gallery is a powerful way to showcase images on a website, allowing users to click on an image and view it in full-scree n mode. This layout, commonly used in photography, portfolio, and e-commerce sites, offers an immersive visual experience by overlaying images on a dimmed background. In this guide, we’ll walk through building a full-screen lightbox image gallery using HTML

, CSS, and JavaScript to create a beautiful and responsive gallery that users can navigate seamlessly.

What is a Full-Screen Lightbox Gallery?

A lightbox gallery is an interactive, overlay-style gallery where images open in full screen, typically with navigation controls to cycle through images. It provides an unobstructed view of each image without distractions from other website elements, making it ideal for visual-heavy content. This type of gallery enhances the user experience by allowing users to focus solely on the images.

Step-by-Step Guide to Building a Full-Screen Lightbox Gallery

1. Basic HTML Structure for the Image Gallery

Let’s start by creating the HTML structure, where each image is part of a grid gallery. When an image is clicked, it will open in a full-screen lightbox view.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full-Screen Lightbox Gallery</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Image Gallery -->
  <div class="gallery">
    <div class="gallery-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="gallery-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="gallery-item"><img src="image3.jpg" alt="Image 3"></div>
    <!-- Add more images as needed -->
  </div>

  <!-- Lightbox -->
  <div class="lightbox" id="lightbox">
    <span class="close" id="close">&times;</span>
    <img class="lightbox-img" id="lightbox-img" src="" alt="Lightbox Image">
    <div class="navigation">
      <span class="prev" id="prev">&#10094;</span>
      <span class="next" id="next">&#10095;</span>
    </div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation:

  • Gallery Container: The .gallery div contains each image inside a .gallery-item div, making it easy to style and organize the grid.
  • Lightbox Overlay: The .lightbox div holds the full-screen image display along with navigation controls (prev and next) and a close button to exit the lightbox.

2. CSS for Styling the Lightbox and Gallery

Next, we’ll style the gallery to make it visually appealing and the lightbox to overlay the entire screen when an image is clicked.


/* styles.css */

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* Gallery Styling */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  max-width: 1200px;
  width: 100%;
}

.gallery-item img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* Lightbox Styling */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.close, .prev, .next {
  position: absolute;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
}

.close {
  top: 20px;
  right: 30px;
}

.prev {
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.next {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

/* Hover Effects */
.prev:hover, .next:hover, .close:hover {
  color: #ddd;
}

Explanation of the CSS:

  1. Grid Gallery: The .gallery uses CSS grid to display images in a responsive, evenly spaced grid. The hover effect on each image (transform: scale(1.05)) adds visual interactivity.

  2. Lightbox Overlay: The .lightbox covers the entire screen and darkens the background, creating a focused view on the image. The display: none hides the lightbox until it’s triggered by JavaScript.

  3. Navigation and Close Buttons: The .close, .prev, and .next elements are styled as large icons that are easy to click, improving user experience.

3. JavaScript for Lightbox Functionality

Now, let’s add JavaScript to make the lightbox functional, allowing users to open images in full-screen mode, navigate between images, and close the lightbox.


// scripts.js

// Select necessary elements
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
const closeBtn = document.getElementById("close");
const nextBtn = document.getElementById("next");
const prevBtn = document.getElementById("prev");
const galleryItems = document.querySelectorAll(".gallery-item img");

let currentIndex = 0;

// Open lightbox
galleryItems.forEach((img, index) => {
  img.addEventListener("click", () => {
    lightbox.style.display = "flex";
    lightboxImg.src = img.src;
    currentIndex = index;
  });
});

// Close lightbox
closeBtn.addEventListener("click", () => {
  lightbox.style.display = "none";
});

// Show next image
nextBtn.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % galleryItems.length;
  lightboxImg.src = galleryItems[currentIndex].src;
});

// Show previous image
prevBtn.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + galleryItems.length) % galleryItems.length;
  lightboxImg.src = galleryItems[currentIndex].src;
});

// Close lightbox on clicking outside image or pressing Escape key
lightbox.addEventListener("click", (e) => {
  if (e.target === lightbox) {
    lightbox.style.display = "none";
  }
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    lightbox.style.display = "none";
  }
});

Explanation of the JavaScript:

  1. Open Lightbox: When an image is clicked, it opens the lightbox, displays the image in full screen, and saves the currentIndex for navigation.

  2. Close Lightbox: The close button (closeBtn) hides the lightbox, and it can also be closed by clicking outside the image or pressing the Escape key.

  3. Navigate Between Images: The next and prev buttons update currentIndex and display the next or previous image. This navigation loops, so reaching the end of the gallery cycles back to the beginning.

4. Adding Additional Effects

To make the lightbox even more engaging, you can add transition effects or animations when switching between images.

CSS Fade Transition:

Add a fade-in effect when displaying images in the lightbox:


.lightbox-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox.show .lightbox-img {
  opacity: 1;
}

JavaScript:

Modify the JavaScript to add a class when opening the lightbox to enable the fade-in effect:


galleryItems.forEach((img, index) => {
  img.addEventListener("click", () => {
    lightbox.classList.add("show");
    lightbox.style.display = "flex";
    lightboxImg.src = img.src;
    currentIndex = index;
  });
});

closeBtn.addEventListener("click", () => {
  lightbox.classList.remove("show");
  lightbox.style.display = "none";
});

Preview

See the Pen Creating a Full-Screen Lightbox Image Gallery for Stunning Visuals by codepen (@codepen-the-selector) on CodePen.


Conclusion

Building a full-screen lightbox image gallery with HTML, CSS, and JavaScript is an effective way to create a visually immersive experience for users. With the step-by-step instructions provided in this guide, you can

Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال