Для демонстрации каталог разбит на две страницы по 12 файлов. Переключение
страниц реализовано на чистом CSS через переключатели под галереей.
Папка: https://alartstudio.ru/imgs/younote/Показано: 12 файлов на странице (всего 24)
01WEBP · 320×240
youn_note_01.webp
152 КБ12.07 · 14:32
02WEBP · 320×240
youn_note_02.webp
148 КБ12.07 · 14:31
03WEBP · 320×240
youn_note_03.webp
160 КБ12.07 · 14:30
04JPG · 1024×768
youn_note_04.jpg
284 КБ12.07 · 14:28
05PNG · 640×480
youn_note_05.png
196 КБ12.07 · 14:26
06WEBP · 640×480
youn_note_06.webp
203 КБ12.07 · 14:24
07JPG · 640×480
youn_note_07.jpg
201 КБ12.07 · 14:23
08PNG · 640×480
youn_note_08.png
207 КБ12.07 · 14:21
09WEBP · 640×480
youn_note_09.webp
210 КБ12.07 · 14:20
10JPG · 640×480
youn_note_10.jpg
215 КБ12.07 · 14:18
11PNG · 640×480
youn_note_11.png
219 КБ12.07 · 14:16
12WEBP · 640×480
youn_note_12.webp
225 КБ12.07 · 14:15
13JPG · 640×480
youn_note_13.jpg
229 КБ12.07 · 14:13
14PNG · 640×480
youn_note_14.png
231 КБ12.07 · 14:12
15WEBP · 640×480
youn_note_15.webp
233 КБ12.07 · 14:10
16JPG · 640×480
younote_16.jpg
238 КБ12.07 · 14:09
17PNG · 640×480
youn_note_17.png
241 КБ12.07 · 14:07
18WEBP · 640×480
youn_note_18.webp
247 КБ12.07 · 14:05
19JPG · 640×480
youn_note_19.jpg
252 КБ12.07 · 14:04
20PNG · 640×480
youn_note_20.png
256 КБ12.07 · 14:02
21WEBP · 640×480
youn_note_21.webp
259 КБ12.07 · 14:01
22JPG · 640×480
youn_note_22.jpg
262 КБ12.07 · 13:59
23PNG · 640×480
youn_note_23.png
268 КБ12.07 · 13:57
24WEBP · 640×480
youn_note_24.webp
271 КБ12.07 · 13:55
Страница 1 из 2 · файлы 1–12Страница 2 из 2 · файлы 13–24
…10
Модель демонстрирует, как может выглядеть постраничный вывод: активная страница
переключается через радиокнопки page-1 и page-2, а CSS
показывает нужный набор карточек.
Как это может работать на сервере
Здесь показан статический макет. В реальном проекте сервер (PHP, Node.js
и т.п.) отдаёт только нужный набор файлов для выбранной страницы, а фронтенд
может переключать их через JS или менять классы у блока .file-grid.
Этот пример иллюстрирует конечный вид интерфейса без JavaScript.