A beginner-friendly, fully responsive image gallery built with pure HTML, CSS, and Vanilla JavaScript — no frameworks, no libraries.
- Dynamic thumbnails — generated by a JavaScript
forEachloop, not hand-coded HTML - Featured image — large display area with smooth fade transitions on change
- Previous / Next navigation — wraps around from last → first and first → last
- Dark Mode / Light Mode toggle — CSS Variables handle all colour switching
- Keyboard navigation —
←Left Arrow = Previous ·→Right Arrow = Next - Image counter — shows "Image X of Y" at all times
- Active thumbnail highlight — glowing ring on the currently selected thumb
- Hover effects — scale, border, and shadow on thumbnail hover
- Fully responsive — CSS Grid
auto-filladapts to any screen size - Accessible —
aria-label,tabindex, keyboard-focusable thumbnails,:focus-visiblering,prefers-reduced-motionsupport
| Technology | Version |
|---|---|
| HTML5 | Semantic elements, ARIA attributes |
| CSS3 | Variables, Grid, Flexbox, Transitions |
| JavaScript | ES6 (const/let, arrow functions, template literals) |
No React · No Bootstrap · No jQuery · No Tailwind · No Angular · No Vue
| Concept | Where |
|---|---|
| Arrays | imageData[] stores all 10 image objects |
| Loops | forEach builds all thumbnails dynamically |
| Functions | showImage(), showPrev(), showNext(), buildThumbnails(), toggleTheme(), updateCounter(), updateActiveThumbnail(), init() |
| Conditionals | Boundary/wrap checks in showPrev/showNext; theme check in toggleTheme; if/else throughout |
| Events | click on buttons & thumbnails; keydown for arrow keys; keydown for Enter/Space on focused thumbnails |
| DOM Manipulation | getElementById, createElement, appendChild, classList.add/remove, textContent, src, alt, setAttribute, scrollIntoView |
js-image-gallery/
├── index.html — Page structure and semantic HTML
├── style.css — All styling: tokens, layout, responsive, animations
├── script.js — All interactivity: gallery logic, events, dark mode
└── README.md — This file
- Download or clone the folder.
- Open
index.htmlin any modern browser — no server required.
# Optional: serve locally with Python
python -m http.server 8080
# Then open http://localhost:8080(Add screenshots here)
- Image captions displayed below the featured image
- Search / filter images by tag
- Full-screen / lightbox mode
- Lazy loading with
loading="lazy"andIntersectionObserver - Touch/swipe support for mobile
- Slideshow / autoplay mode with pause on hover
- Local Storage: remember last viewed image and theme preference
- Image upload: let users add their own images to the gallery
Images are royalty-free placeholders from picsum.photos, which serves random photos from Unsplash.