Lightbox Image Gallery

A responsive and modern image gallery implementation with a lightbox feature, built using vanilla JavaScript, HTML5, and CSS3. This project provides a clean and intuitive way to display images with a smooth lightbox overlay effect when clicked.

Features

• Responsive grid layout that adapts to different screen sizes
• Smooth hover effects on gallery images
• Lightbox overlay with fade-in/fade-out animations
• Click anywhere to close the lightbox
• Optimized for mobile devices
• Clean and modern design
• No external dependencies

Demo

To use the gallery, simply click on any image in the grid. The image will open in a lightbox overlay with a semi-transparent dark background. Click anywhere on the screen to close the lightbox and return to the gallery view.

Installation

1. Clone or download this repository
2. Place your images in the project directory
3. Update the image sources in index.html to match your image filenames
4. Open index.html in a web browser

<!-- Example of adding an image to the gallery -->
<img src="your-image.jpg" alt="Your Image" class="gallery-item" onclick="openLightbox('your-image.jpg')">

Project Structure

├── index.html      # Main HTML file with gallery structure
├── styles.css      # CSS styles for gallery and lightbox
├── script.js       # JavaScript functionality
└── README.md       # Project documentation

Technical Details

HTML

• Semantic HTML5 markup
• Responsive meta tags
• Simple and clean structure

CSS

• Modern CSS3 features
• CSS Grid for responsive layout
• Flexbox for centering
• Smooth transitions and animations
• Mobile-first approach

JavaScript

• Vanilla JavaScript with no dependencies
• Simple and efficient event handlers
• Clean function organization

Browser Support

This gallery works in all modern browsers that support CSS Grid and modern JavaScript features:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Customization

Modifying the Grid Layout

You can customize the grid layout by adjusting the following CSS in styles.css:

.gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

Changing Animation Speed

Adjust the transition duration in styles.css:

.lightbox {
    transition: visibility 0.3s, opacity 0.3s;
}

License

This project is open source and available under the MIT License.

Contributing

Feel free to fork this project and submit pull requests with improvements or bug fixes. You can also open issues for any bugs you find or features you'd like to suggest.