13 - Dynamic Image Gallery with Lightbox

Description

Develop a web application showcasing a collection of images:

• Display images in a grid layout with captions.

• Implement a lightbox overlay to view individual images at a larger size.

• Allow users to navigate between images within the lightbox.

• Consider optional features like image filtering, search, and zooming.

Algorithm

1. Data Structure:

   • Store image data in an array or object, including:

     • Image URL

     • Caption (optional)

   • Maintain additional state for lightbox visibility and current image index.

2. Image Gallery:

   • Render each image in a grid component with its URL and caption (if available).

   • Attach onClick event listeners to open the lightbox on image click.

3. Lightbox:

   • Overlay a modal container upon click, displaying the current image at a larger size.

   • Implement navigation buttons or arrows to move between images in the collection.

   • Provide a close button to hide the lightbox.

4. Optional Features:

   • Offer filtering options based on categories or tags.

   • Enable image search functionality within the gallery.

   • Integrate zooming capabilities for detailed image exploration.

Code

import React, { useState } from 'react';

const images = [
  { url: 'image1.jpg', caption: 'Sunset View' },
  // ... more image objects
];

function ImageGallery() {
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const handleImageClick = (index) => {
    setLightboxOpen(true);
    setCurrentImageIndex(index);
  };

  const handleNextImage = () => {
    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  const handlePrevImage = () => {
    setCurrentImageIndex((prevIndex) => Math.max(prevIndex - 1, 0));
  };

  const renderLightbox = () => {
    if (!lightboxOpen) return null;
    const currentImage = images[currentImageIndex];
    return (
      <div className="lightbox">
        <img src={currentImage.url} alt={currentImage.caption} />
        <button onClick={handlePrevImage}>Prev</button>
        <button onClick={handleNextImage}>Next</button>
        <button onClick={() => setLightboxOpen(false)}>Close</button>
      </div>
    );
  };

  return (
    <div className="image-gallery">
      {images.map((image, index) => (
        <div key={index} className="image-card" onClick={() => handleImageClick(index)}>
          <img src={image.url} alt={image.caption} />
          {image.caption && <p>{image.caption}</p>}
        </div>
      ))}
      {renderLightbox()}
    </div>
  );
}

export default ImageGallery;

Explanation

1. Data Structure:

• images array: Stores image objects with url and optional caption properties.

• lightboxOpen state variable: Controls the visibility of the lightbox.

• currentImageIndex state variable: Tracks the index of the displayed image.

2. Image Gallery:

• images.map function: Iterates through the images array and renders each image in an image-card div.

• onClick event handler on each image-card: Updates lightboxOpen to true and sets currentImageIndex to the clicked image's index.

3. Lightbox:

• renderLightbox function: Returns the lightbox component if lightboxOpen is true.

• Displays the current image using images[currentImageIndex].

• Provides navigation buttons (Prev, Next) to move between images.

• Close button sets lightboxOpen to false to hide the lightbox.

4. State Management:

• useState hook manages the lightboxOpen and currentImageIndex states.

• State updates trigger re-renders of the gallery and lightbox components.

5. Navigation Logic:

• handleNextImage function: Increments currentImageIndex using modulo to loop through the images.

• handlePrevImage function: Decrements currentImageIndex, ensuring it doesn't go below 0.

Additional Notes

• Consider using CSS libraries like Grid or Flexbox for responsive image layouts.

• Explore lightbox libraries like ReactLightbox or react-image-gallery for advanced features.

• Implement accessibility options for screen readers and keyboard navigation.