Лайтбокс и раскладки
PhotoSwipe, Swiper и Masonry идут в составе пакета (все под MIT). Ничего из этого не попадает на страницу, пока вызов сниппета не попросит.
[[!prism? &lightbox=`photoswipe` &preset=`preview` &presets=`full`]]
Сниппет выберет чанки, подключит CSS и JS библиотеки и допишет инициализацию сразу после своей разметки. Никакого кода в шаблоне.
| Параметр | По умолчанию | Что делает |
|---|---|---|
&lightbox | prism.lightbox (пусто) | photoswipe, fancybox или пусто — только разметка |
&layout | prism.layout (grid) | grid, masonry, swiper |
&lightboxOptions | — | JSON поверх опций лайтбокса |
&layoutOptions | — | JSON поверх опций раскладки |
&assets | prism.register_assets (да) | 0 — не подключать файлы, библиотека уже в сборке темы |
Комбинируются: &layout=masonry &lightbox=photoswipe — плитка разной высоты с лайтбоксом. Каждый
вызов получает свой id контейнера, поэтому несколько галерей на странице, в том числе с разными
библиотеками, не пересекаются.
Из этого пресета берутся ссылка на оригинал и его настоящие размеры — без них лайтбокс не сможет правильно масштабировать.
Masonry
Плитки одинаковой высоты выглядят как обычная сетка, поэтому нужен пресет с высотой 0:
[[!prism? &layout=`masonry` &lightbox=`photoswipe` &preset=`preview` &presets=`full`]]
.prism-masonry { margin: 0 -7px; }
.prism-masonry__sizer,
.prism-masonry__item { width: 25%; }
.prism-masonry__item { padding: 0 7px 14px; box-sizing: border-box; }
@media (max-width: 900px) { .prism-masonry__sizer, .prism-masonry__item { width: 33.333%; } }
Ту же разметку можно разложить вообще без JS — тогда поставьте &assets=0:
.prism-masonry { columns: 4 220px; column-gap: 12px; }
.prism-masonry__sizer { display: none; }
.prism-masonry__item { break-inside: avoid; margin: 0 0 12px; }
Fancybox
Fancybox в пакет не входит: у @fancyapps/ui собственная лицензия — бесплатно для
некоммерческих проектов, для коммерческих платно. В MIT-пакет её класть нельзя.
Поддержка при этом полная. Купите или скачайте, положите файлы на сайт и укажите пути на вкладке
Компоненты → Prism → Вывод (системная настройка prism.libraries):
{"fancybox": {
"css": ["/assets/vendor/fancybox/fancybox.css"],
"js": ["/assets/vendor/fancybox/fancybox.umd.js"]
}}
После этого &lightbox=fancybox работает так же, как остальные.
Кнопки и надписи PhotoSwipe
Всё управление элементами лайтбокса — это опции PhotoSwipe, и имя опции совпадает с именем элемента. Форм три, и каждая работает для любого элемента из таблицы ниже:
| Что нужно | Опция | Пример |
|---|---|---|
| Убрать элемент | <имя> = false | {"zoom": false} |
| Своя иконка | <имя>SVG = разметка | {"closeSVG": "<svg viewBox=\"0 0 24 24\">…</svg>"} |
| Своя подпись | <имя>Title = текст | {"closeTitle": "Закрыть"} |
Какие элементы есть
| Имя | Что это | Подпись по умолчанию |
|---|---|---|
close | Крестик «закрыть» | Close |
arrowPrev | Стрелка назад | Previous |
arrowNext | Стрелка вперёд | Next |
zoom | Лупа «приблизить» | Zoom |
counter | Счётчик «3 / 12» | — |
preloader | Индикатор загрузки кадра | — |
download | Скачать оригинал. Добавляет Prism, по умолчанию выключена | Download |
prism-caption | Подпись Prism вдоль нижнего края | — |
Последние два — не из PhotoSwipe, их добавляет Prism, но управляются они так же:
{"prism-caption": false} выключает подпись, {"download": true} включает кнопку скачивания
(о ней — ниже).
Close, Previous, Next, Zoom попадают и в title (всплывающая подсказка), и в aria-label,
то есть их читает скринридер. Одной строкой:
{"closeTitle": "Закрыть", "arrowPrevTitle": "Назад", "arrowNextTitle": "Вперёд", "zoomTitle": "Увеличить"}
Разделитель счётчика — отдельная опция, не часть имени: {"indexIndicatorSep": " из "} превратит
«3 / 12» в «3 из 12».
Где это задавать
Три уровня, каждый следующий перекрывает предыдущий:
| Уровень | Где | Что охватывает |
|---|---|---|
| Поставка | — | bgOpacity: 0.92, showHideAnimationType: "zoom" |
| Сайт | Компоненты → Prism → Вывод, настройка prism.libraries | всё, что укажете |
| Вызов | &lightboxOptions | всё, только для этой галереи |
На вкладке «Вывод» карточка «Кнопки PhotoSwipe» показывает пять из них — close, arrowPrev,
arrowNext, zoom, counter: галочка убирает кнопку, поле рядом принимает свою иконку. Подписи
(<имя>Title), preloader и prism-caption там не выведены — их задают JSON-ом в
prism.libraries или в вызове.
[[!prism? &lightbox=`photoswipe` &preset=`preview` &presets=`full`
&lightboxOptions=`{"zoom":false,"counter":false,"closeTitle":"Закрыть"}`]]
prism.libraries заменяет опции целиком, а не по ключуВ настройке prism.libraries то, что вы записали в options, встаёт вместо поставочных опций,
а не смешивается с ними. Поэтому такой JSON заодно потеряет bgOpacity и showHideAnimationType:
{"photoswipe": {"options": {"zoom": false}}}
Правильно — перечислить и их:
{"photoswipe": {"options": {"bgOpacity": 0.92, "showHideAnimationType": "zoom", "zoom": false}}}
Вкладка «Вывод» так и делает сама: она сохраняет весь набор опций, а не одну изменённую. Оговорка
касается только ручной правки JSON. С &lightboxOptions этой ловушки нет — там опции
накладываются поверх, ключ за ключом.
Кнопка «скачать»
У PhotoSwipe такой кнопки нет — её добавляет Prism, и по умолчанию она выключена: галерея не всегда то, что раздают. Включается опцией:
[[!prism? &lightbox=`photoswipe` &preset=`preview` &presets=`full`
&lightboxOptions=`{"download":true,"downloadTitle":"Скачать оригинал"}`]]
Это обычная ссылка <a download>, а не кнопка: браузер сохраняет файл, а не уходит на него.
Адрес берётся из открытого кадра и меняется при листании, то есть скачивается именно то фото,
которое сейчас на экране, — оригинал из пресета full. На слайдах без файла (видео, embed) кнопка
прячется.
Зарегистрирована она под именем download, а значит подчиняется тем же трём опциям, что и штатные:
downloadSVG меняет иконку, downloadTitle — подпись, download: false убирает обратно.
Файл, на который ведёт &presets=full — то есть изображение, приготовленное этим пресетом, а не
исходник из медиабиблиотеки. Если нужен именно исходник, отдайте в &presets пресет без
ограничения размера или соберите ссылку сами в своём чанке.
Свои элементы
Всё, что показывает PhotoSwipe, — это зарегистрированные элементы, и добавить свой можно через
ui.registerElement (документация PhotoSwipe). Это
уже JavaScript, а не опция, поэтому через &lightboxOptions его не передать: нужен свой
init-модуль вместо поставляемого.
Путь к нему меняется там же, где пути к остальным файлам библиотеки —
prism.libraries.photoswipe.init. За образец можно взять js/web/prism-photoswipe.js: подпись и
кнопка скачивания в нём сделаны ровно этим способом.
Коротко о том, что принимает registerElement:
| Свойство | Что задаёт |
|---|---|
name | Имя. По нему же работают <имя>, <имя>SVG, <имя>Title |
order | Порядок в панели: счётчик 5, preloader 7, zoom 10, стрелки 10–11, закрыть 20 |
isButton | true — получится <button class="pswp__button pswp__button--<имя>"> |
tagName | Заменить тег, например a для ссылки |
appendTo | bar (верхняя панель, по умолчанию), wrapper (область прокрутки), root |
html | Строка разметки либо {isCustomSVG: true, size: 32, inner, outlineID} |
title | Подсказка и aria-label |
onClick | Имя метода PhotoSwipe ("close", "next") либо функция (e, el, pswp) |
onInit | (el, pswp) — сюда вешают подписку на pswp.on('change', …) |
Остальные опции PhotoSwipe
&lightboxOptions и prism.libraries передают опции в PhotoSwipe как есть, без белого списка,
поэтому доступно всё, что понимает библиотека: loop, bgOpacity, showHideAnimationType,
padding, wheelToZoom, initialZoomLevel и прочие — см.
документацию PhotoSwipe.
Свои копии библиотек
Там же меняются пути к PhotoSwipe, Swiper и Masonry — на CDN, на свою сборку или на другую версию. Сохраняется только то, что вы изменили, поэтому обновление пакета не затрёт ваши пути и сможет обновить свои. Кнопка «Вернуть встроенные пути» откатывает к поставке.