# 13 - Dynamic Image Gallery with Lightbox

### **Description**

Create a React application that displays a dynamic image gallery with a lightbox feature. The gallery should display a grid of image thumbnails, and when a thumbnail is clicked, the corresponding image should be displayed in a lightbox.

### **Algorithm**

1. Initialize state variables to store the images data and the currently selected image.
2. Render a grid of image thumbnails using a mapping function.
3. Define a function to handle image selection and update the selected image state.
4. Render a lightbox component with the selected image.
5. Define a function to handle lightbox closing and update the selected image state.

### **Classes**

* `ImageGallery`: A component that manages the images state and renders the gallery and lightbox.
* `Lightbox`: A component that displays the selected image in a full-screen view.

### **Code**

ImageGallery.js

```javascript
import React, { useState } from 'react';
import Lightbox from './Lightbox';

function ImageGallery() {
  const [images, setImages] = useState([
    { id: 1, url: 'image1.jpg' },
    { id: 2, url: 'image2.jpg' },
    { id: 3, url: 'image3.jpg' },
  ]);
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageSelect = (image) => {
    setSelectedImage(image);
  };

  const handleLightboxClose = () => {
    setSelectedImage(null);
  };

  return (
    <div>
      <ul>
        {images.map((image) => (
          <li key={image.id}>
            <img
              src={image.url}
              alt={image.url}
              onClick={() => handleImageSelect(image)}
            />
          </li>
        ))}
      </ul>
      {selectedImage && (
        <Lightbox
          image={selectedImage}
          onClose={handleLightboxClose}
        />
      )}
    </div>
  );
}

export default ImageGallery;

```

Lightbox.js

```javascript
import React from 'react';

function Lightbox({ image, onClose }) {
  return (
    <div className="lightbox">
      <img src={image.url} alt={image.url} />
      <button onClick={onClose}>Close</button>
    </div>
  );
}

export default Lightbox;
```

index.css

```css
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
}

.lightbox button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}
```

### **Explanation**

The `ImageGallery` component initializes the images state and renders a grid of thumbnails. When a thumbnail is clicked, it updates the selected image state and renders the `Lightbox` component. The `Lightbox` component displays the selected image in a full-screen view and provides a close button to update the selected image state.

### Possible Future Enhancements

* Add image captions and descriptions.
* Implement image zoom and pan functionality.
* Add a loading indicator for images.
* Integrate with a backend service to fetch images data.
* Display image metadata (e.g., camera model, aperture).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/13-dynamic-image-gallery-with-lightbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.