Добавление PhotoSwipe в ваш проект

PhotoSwipe — это популярная JavaScript библиотека, предназначенная для создания адаптивных и доступных галерей изображений. Вот подробное руководство по интеграции PhotoSwipe в ваш проект.

Шаг 1: Установка PhotoSwipe

Начните с установки пакета PhotoSwipe с помощью npm. Откройте терминал и выполните следующую команду:

npm install photoswipe

Либо вы можете забрать нужные файлы из репозитория

Шаг 2: Копирование необходимых файлов

После установки вам необходимо вручную скопировать файлы PhotoSwipe из папки node_modules/photoswipe/distв директорию static вашего проекта. Этот шаг обеспечивает правильное размещение необходимых скриптов и таблиц стилей в вашем веб-окружении.

├── static
│   ├── css
│   │   └── photoswipe.css
│   └── photoswipe
│       ├── photoswipe-lightbox.esm.js
│       ├── photoswipe-lightbox.esm.js.map
│       ├── photoswipe-lightbox.esm.min.js
│       ├── photoswipe.esm.js
│       ├── photoswipe.esm.js.map
│       └── photoswipe.esm.min.js

Шаг 3: Добавление CSS и инициализация библиотеки

Интегрируйте файлы CSS и JavaScript PhotoSwipe в ваш проект. Это можно сделать, добавив ссылки на файлы photoswipe.css и photoswipe-lightbox.esm.js в ваши HTML-документы или через процесс сборки вашего проекта.

<link rel="stylesheet" href="/css/photoswipe.css" />

Для активации PhotoSwipe добавьте следующий инициализирующий скрипт перед закрывающим тегом </body> в вашем HTML-файле:

<script type="module">
  console.log("uihio");
  import PhotoSwipeLightbox from "/photoswipe/photoswipe-lightbox.esm.js";
  const lightbox = new PhotoSwipeLightbox({
	gallery: "#my-gallery",
	children: "a",
	initialZoomLevel: "fit", // initial zoomlevel
	secondaryZoomLevel: "fit", // don't change zoom
	imageClickAction: "close", // close on click
	pswpModule: () => import("/photoswipe/photoswipe.esm.js"),
  });
  lightbox.init();
</script>

Шаг 4: Создание шорткода для упрощения интеграции

Для проектов, использующих статические генераторы сайтов, такие как Hugo, создайте шорткод, чтобы упростить добавление галерей и сделать их более универсальными.

Перейдите в вашу директорию с макетами и создайте файл gallery.html внутри layout/shortcodes/:

layouts
├── _defaults
│   ├── kbdfsjjh.html
│   └── single.html
├── partials
│   ├── extend_body.html
│   ├── extend_footer.html
│   └── extend_head.html
└── shortcodes
	├── desc.html
	└── gallery.html

Содержание gallery.html должно выглядеть так:

<!-- block begin -->
<div id="my-gallery">
  {{ $images := .Page.Resources.Match (printf "%s*" (.Get "folder")) }} {{ range
  $images }}
  <a
    href="{{ .RelPermalink }}"
    data-pswp-width="{{ .Width }}"
    data-pswp-height="{{ .Height }}"
  >
    <img src="{{ .RelPermalink }}" alt="{{ .Name }}" />
  </a>
  {{ end }}
</div>
<!-- end of block -->
<!-- caption code -->
{{ with .Get "title" }}
<h4>{{ . }}</h4>
{{ end }}

Используйте шорткод в вашем контенте следующим образом:

{{< gallery folder="folder_with_images" title="My favorite cat" >}}

Результат:

Локи черный кот