React Image Gallery Example

Introduction

This website features a list of images and an image viewer that pops up when one of the images in the list is clicked.

Virtualized list and infinite scrolling
Responsive design for the image list
- from a single column up to three columns depending on the screen size
Low-quality image preview while the main image is loading.
Skeleton animation while the image is loading.
Scale-down animation when the image is loaded.
Image optimization with srcset and sizes.
Slide-in and slide-out animations in the image viewer.
Maximum space allocation for the main image in the viewer depending on its aspect ratio.
keyboard navigation support (arrow-left, arrow-right)
drag navigation support (swipe-left, swipe-right)
toggle on/off heads-up display in the image viewer
- arrow-up, arrow-down
- on click

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.vscode		.vscode
app		app
public		public
utils		utils
.env		.env
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
next.config.js		next.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json