This project is a responsive photo gallery designed to showcase a collection of photographs. It dynamically loads images and their metadata from a JSON file, presenting them in an attractive, user-friendly interface. The gallery supports various features such as lazy loading, infinite scrolling, and responsive design to accommodate different device sizes.
- Dynamic Image Loading: Automatically loads images and their metadata from a JSON file.
- Responsive Design: Adapts layout for mobile, tablet, and desktop viewports.
- Slick Slider Integration: Utilizes the Slick Slider library for a smooth, responsive carousel experience.
- Lazy Loading: Images are loaded on demand to improve performance and user experience.
- Infinite Scrolling: Allows users to cycle through the images in a loop without interruption.
Add your photos to /photos folder.
Add the metadata to /photos/metadata.json/.
![Note] Use my Extraction script to automate extracting metadata.
- Slick Slider - for carousel functionality
-
Running the Project Locally
To view the project, you'll need to run it on a local server. If you have Python installed, you can start a simple HTTP server with the following command:
python -m http.server
Or, if you prefer Node.js, you can use
http-serverby first installing it globally:npm install --global http-server
Then run it in your project directory:
http-server
Visit
http://localhost:8000(or the port provided in your terminal) in your web browser to view the project.