In this project, we will be building a basic image gallery that allows users to browse a collection of images and view a larger version with a lightbox effect. The gallery will also include navigation buttons for moving between images.

Project Checklist

• Design and implement an image gallery using HTML, CSS, and JavaScript
• Create a grid of images that can be clicked to view a larger version
• Implement a lightbox effect for displaying larger version of image
• Add navigation buttons for moving between images in gallery
• Test and debug the image gallery using sample data

Bonus Project Checklist Items

• Add a feature that allows users to filter images by tags or categories
• Add a feature that allows users to upload their own images to gallery

Inspiration (Any companies/libraries similar)

• Image Gallery
• Lightbox

Hint/Code snippet to start

To get started, you can use the following code snippet to set up the basic HTML structure for the image gallery:

<div class="image-gallery">
  <div class="image-grid">
    <!-- Add image elements here -->
  </div>
  <div class="lightbox">
    <!-- Add the lightbox content here -->
  </div>
</div>

This code creates a container for the image gallery and divides it into two sections: a grid of images and a lightbox for displaying the larger version of an image. You can then add the desired images and content to these sections and style them with CSS.