Image Gallery w/ Lightbox

Absolutely! Here’s the revised version of the lightbox gallery tutorial with your preferences:

Lightbox Gallery with Vanilla JS (Updated)

This tutorial will guide you through building a simple lightbox gallery for your portfolio website using vanilla JavaScript, utilizing document.querySelector and for-of loops for element collections.

Prerequisites:

• Basic HTML and CSS knowledge (including selectors)
• Understanding of DOM manipulation in JavaScript (e.g., querySelector, addEventListener, for-of loops)

Let’s get started!

1. HTML Structure:

Create a section for your gallery containing individual image elements:

<section class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  ...
</section>

<div id="lightbox" style="display: none;">
  <img id="lightbox-image" src="" alt="">
  <button id="lightbox-close">Close</button>
</div>

2. CSS Styling:

Style your gallery section and images as desired. You can add a border, spacing, and adjust image size.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto;
}

.gallery img {
  width: 200px;
  height: 150px;
  cursor: pointer;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

3. JavaScript Script:

1. Access Lightbox and Image Elements:

Instead of using document.getElementById, we can use document.querySelector:

const lightbox = document.querySelector('#lightbox');
const lightboxImage = document.querySelector('#lightbox-image');
const closeButton = document.querySelector('#lightbox-close');

1. Add Event Listeners to Gallery Images:

Loop through each image in the gallery using a for-of loop and add a click event listener:

var galleryImages = document.querySelectorAll('.gallery img');

for (const image of galleryImages) {
  image.addEventListener('click', openLightbox);
}

1. Open Lightbox Function:

Similar to the previous version, this function sets the lightbox image source and displays it:

function openLightbox(event) {
  const clickedImage = event.target;
  lightboxImage.src = clickedImage.src;
  lightbox.classList.add('visible')
  lightbox.classList.remove('hidden')
}

1. Close Lightbox Function:

This function hides the lightbox and clears the image source:

closeButton.addEventListener('click', closeLightbox);

function closeLightbox() {
  lightbox.classList.remove('visible')
  lightbox.classList.add('hidden')
  lightboxImage.src = '';
}

Congratulations! You’ve successfully built a lightbox gallery using document.querySelector and for-of loops. Remember to replace the placeholder image paths with your own!

Complete Working Example

Check out the working example below – to get this all working in my code editor, I’ve inlined the style and script elements which you would have in separate script.js and style.css files in a real project.

Credits

This tutorial was generated with the help of Google Bard – thanks Large Language Model!