https://github.com/vwebio/gallery_js_v1
Фотогалерея в стиле Material Design.
https://github.com/vwebio/gallery_js_v1
css3 express-js html5
Last synced: about 1 month ago
JSON representation
Фотогалерея в стиле Material Design.
- Host: GitHub
- URL: https://github.com/vwebio/gallery_js_v1
- Owner: vwebio
- Created: 2025-05-15T17:05:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T17:09:22.000Z (about 1 year ago)
- Last Synced: 2025-05-15T18:24:52.503Z (about 1 year ago)
- Topics: css3, express-js, html5
- Language: JavaScript
- Homepage:
- Size: 971 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Фотогалерея Material Design
## Описание
Интерактивная веб-галерея с адаптивным интерфейсом в стиле Material Design. Позволяет просматривать, переключать и увеличивать фотографии, удобно работать с миниатюрами и полноразмерными изображениями.
## Основной функционал
- Просмотр фотографий с плавной анимацией
- Переключение между фото с помощью миниатюр и стрелок
- Увеличение фото в модальном окне (fullscreen)
- Адаптивная верстка для мобильных и десктопных устройств
- Циклическая прокрутка миниатюр
- Загрузка списка изображений с сервера (REST API)
## Стек технологий
- HTML5, CSS3 (Material Design, адаптивность)
- Vanilla JavaScript (ES6+)
- REST API для получения списка изображений
## Структура проекта
```
├── index.html # Главная страница галереи
├── app.js # Логика галереи (JS)
├── css/
│ └── style.css # Стилизация интерфейса
├── images/ # Каталог с фотографиями
└── README.md # Описание проекта
```
## API
- `GET /api/images` — возвращает массив имён файлов изображений (jpg, png)
## Требования
- Node.js (для запуска сервера API)
- Современный браузер (Chrome, Firefox, Edge, Safari)
## Быстрый старт
1. Клонируйте репозиторий:
```sh
git clone https://github.com/your-username/gallery-js-material.git
cd gallery-js-material
```
2. Поместите изображения в папку `images/`.
3. Запустите сервер (пример для Express):
```sh
npm install
node server.js
```
4. Откройте `index.html` в браузере или используйте локальный сервер.
## Пример использования
- Клик по миниатюре — смена основного фото
- Клик по иконке увеличения — открытие полноразмерного изображения
- Стрелки — прокрутка миниатюр