Поездка в Москву 2026 — Фотокладовка

Альбомы

Выбери событие или место. На первом экране — крупные папки, внутри — сетка фотографий и просмотрщик.

Клик по альбому — открыть раздел

Как устроен сайт.
Это один HTML-файл. Он показывает альбомы из блока const DATA = … внизу страницы. Пока сайт статический, браузер сам не читает содержимое папок, поэтому новые фотографии надо либо прописывать в DATA, либо позже подключить автоиндексатор, который сам соберёт список файлов.

1. Положи HTML рядом с папкой photos

Минимальная структура должна быть такой. Исходники можно хранить в D:\Moscow2026\picnic, а копии для сайта — в photos/picnic/.

moscow_photo_archive_v3.html
photos/
├── moscow-city/
│   ├── IMG_0001.jpg
│   └── IMG_0002.jpg
├── aprelevka/
│   ├── IMG_0101.jpg
│   └── IMG_0102.jpg
└── picnic/
    ├── IMG_20260627_200605.jpg
    └── VID_20260627_192826.mp4

2. Используй простые имена папок

лучше латиницей: aprelevka, picnic, people;
без пробелов: вместо них дефис moscow-city;
без очень длинных имён файлов;
форматы: .jpg, .jpeg, .png, .webp, .mp4.

3. Пропиши путь к фото

В блоке DATA найди нужный альбом и поменяй src: null на путь к реальному файлу:

{
  title: "Дорога в Апрелевку",
  src: "photos/aprelevka/IMG_0101.jpg",
  date: "Июнь 2026",
  tags: ["Апрелевка", "Дорога"],
  caption: "Начало поездки."
}

4. Добавь новый альбом

Скопируй шаблон альбома в массив albums:

{
  id: "new-album",
  title: "Новый альбом",
  description: "Короткое описание раздела.",
  access: "Публично",
  date: "Июнь 2026",
  tags: ["Москва", "Люди"],
  cover: "photos/new-album/cover.jpg",
  photos: [
    {
      title: "Первое фото",
      src: "photos/new-album/IMG_0001.jpg",
      date: "Июнь 2026",
      tags: ["Москва"],
      caption: "Подпись к фото."
    }
  ]
}