https://github.com/carlosjcastro/react-image-gallery
A simple and interactive image gallery application built with React. It allows users to view a collection of images in a grid layout and view them in full screen by clicking on any image. The gallery also supports closing the modal by clicking outside the image or using a close button.
https://github.com/carlosjcastro/react-image-gallery
css gallery image imagegallery interactive javascript react responsive-design vitejs vitejs-react
Last synced: about 2 months ago
JSON representation
A simple and interactive image gallery application built with React. It allows users to view a collection of images in a grid layout and view them in full screen by clicking on any image. The gallery also supports closing the modal by clicking outside the image or using a close button.
- Host: GitHub
- URL: https://github.com/carlosjcastro/react-image-gallery
- Owner: carlosjcastro
- License: mit
- Created: 2024-12-24T15:12:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-24T15:36:51.000Z (over 1 year ago)
- Last Synced: 2026-01-03T16:18:13.553Z (5 months ago)
- Topics: css, gallery, image, imagegallery, interactive, javascript, react, responsive-design, vitejs, vitejs-react
- Language: JavaScript
- Homepage: https://react-image-gallery-cjcg.netlify.app/
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Gallery App - Version 1
## English
This is an image gallery app that allows users to view a collection of images in a grid layout. Users can click on an image to open it in a modal for a closer look. The app supports full-screen image viewing with the ability to close the modal when done.
### Features
- **Image Grid**: Displays a collection of images in a clean grid format.
- **Modal View**: Users can click on an image to open it in a larger modal view.
- **Close Modal**: The modal can be closed by clicking on the close button or outside the modal.
- **Responsive Design**: The gallery is fully responsive and adapts to different screen sizes.
### Technologies Used
- **React**: The app is built using React for the frontend.
- **CSS**: Custom styles are applied using traditional CSS for layout and responsiveness.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/carlosjcastro/react-image-gallery.git
2. Install dependencies:
```bash
npm install
3. Run the app locally:
```bash
npm run dev
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
### Developed by Carlos José Castro Galante