/image-library

A single web page that displays a list of images.In reality this is a set of thumbnail images as an image library. Clicking on an image displays a popup of the full image. The popup allows scrolling through the full sized image

Primary LanguageJavaScript

Image Library

A single web page that displays a list of images.In reality this is a set of thumbnail images as an image library.

The image library renders images as lists:

Image pop-up

  • Clicking on an image displays a popup of the full image.
  • An image pop up has a zoomIn, zoomOut, reset and close buttons.
  • The popup allows scrolling through the full sized image.

Technologies used

  • React.
  • CSS.
  • Json-server

Json-server setup

  • Install json-server with the command npm install json-server --save-dev
  • Create a json file db.json and add data inside the file.
  • Run json-server locally through the command json-server --watch db.json --port 3000
  • Json-server link http://localhost:3000/images

Live link

https://image-library-pink.vercel.app/