https://github.com/renderghost/frame
My camera roll on the web
https://github.com/renderghost/frame
Last synced: about 1 year ago
JSON representation
My camera roll on the web
- Host: GitHub
- URL: https://github.com/renderghost/frame
- Owner: renderghost
- Created: 2024-02-20T17:34:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T23:40:33.000Z (over 1 year ago)
- Last Synced: 2025-01-25T16:42:22.744Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://renderedghost.github.io/frame/
- Size: 133 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Photo Gallery Project
## Overview
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.
## Features
- **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.
## Populating your gallery
Add your photos to `/photos` folder.
Add the metadata to `/photos/metadata.json/`.
> ![Note]
> Use my [Extraction script](https://github.com/renderedghost/frame-metadata) to automate extracting metadata.
## Credits
- [Slick Slider](https://kenwheeler.github.io/slick/) - for carousel functionality
## Setup Instructions
1. **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:
```sh
python -m http.server
```
Or, if you prefer Node.js, you can use `http-server` by first installing it globally:
```sh
npm install --global http-server
```
Then run it in your project directory:
```sh
http-server
```
Visit `http://localhost:8000` (or the port provided in your terminal) in your web browser to view the project.