Gallery Site

Responsive, zero-dependency image gallery with lightbox.

Structure

• index.html: Main page with Gallery, About, Contact, and lightbox markup
• assets/css/styles.css: Styles for layout, grid, and lightbox
• assets/js/main.js: Renders images and handles lightbox interactions
• assets/img/: Place your image files here

Usage

1. Add images to assets/img/.
2. Open assets/js/main.js and add entries to the images array, e.g.:

var images = [
  { src: "assets/img/photo1.jpg", alt: "Sunset at lake", caption: "Lakeview, 2024" },
  { src: "assets/img/photo2.jpg", alt: "Forest trail", caption: "Morning hike" }
];

3. Open index.html in a browser.

Keyboard shortcuts inside the lightbox:

• Left/Right arrow: previous/next
• Escape: close

Notes

• Images are not auto-discovered for portability. Explicitly list them in main.js.
• Thumbnails use object-fit cover; original images show in the lightbox.