Прежде всего, давайте убедимся, что у нас есть необходимые файлы. Вы можете загрузить последнюю версию Photoswipe с их официального сайта (photoswipe.com). Обязательно включите в свой проект файлы CSS и JavaScript. Вам также потребуется включить jQuery, поскольку Photoswipe использует его.

После того, как вы все настроили, пришло время погрузиться в код. Предположим, у вас есть базовая структура HTML с элементом-контейнером, в котором вы хотите разместить свою галерею изображений. Вот простой пример:

<div id="my-gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Gallery items will be dynamically inserted here -->
</div>
<div class="image-grid">
    <a href="path/to/image-1.jpg">
        <img src="path/to/thumb-1.jpg" alt="Image 1">
    </a>
    <a href="path/to/image-2.jpg">
        <img src="path/to/thumb-2.jpg" alt="Image 2">
    </a>
    <!-- Add more image links here -->
</div>

В приведенном выше фрагменте кода у нас есть элемент-контейнер с идентификатором «my-gallery». Здесь будет инициализирован Photoswipe. Внутри контейнера у нас есть заполнитель для элементов галереи, который мы будем заполнять динамически.

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

Теперь перейдем к части JavaScript. Мы будем использовать jQuery для обработки привязки событий и инициализации Photoswipe. Вот как выглядит код:

$(document).ready(function() {
    var $gallery = new PhotoSwipe('.pswp');

    $('.image-grid').on('click', 'a', function(e) {
        e.preventDefault();

        var items = [];
        var index = 0;

        $('.image-grid a').each(function() {
            var $anchor = $(this);
            var item = {
                src: $anchor.attr('href'),
                w: 1200, // Replace with actual image width
                h: 800,  // Replace with actual image height
                title: $anchor.find('img').attr('alt')
            };

            items.push(item);

            if ($anchor.is($(e.currentTarget))) {
                index = items.length - 1;
            }
        });

        $gallery.options.index = index;
        $gallery.items = items;
        $gallery.init();
    });
});

В приведенном выше коде JavaScript мы ждем готовности DOM, используя $(document).ready(). Затем мы создаем новый экземпляр PhotoSwipeи передаем селектор для нашего элемента-контейнера.

Затем мы привязываем событие клика к тегам привязки в сетке изображения. При нажатии на тег привязки мы предотвращаем поведение по умолчанию, создаем массив элементов галереи и заполняем его необходимыми данными (источник изображения, ширина, высота и заголовок).

Мы также отслеживаем индекс выбранного элемента, чтобы Photoswipe мог открыть галерею в правильном положении. Наконец, мы обновляем свойства indexи itemsэкземпляра галереи и инициализируем его.

И вуаля! Теперь у вас есть функциональная галерея изображений с помощью Photoswipe. Просто нажмите на миниатюру любого изображения, и Photoswipe откроет красивый лайтбокс с элементами управления навигацией, возможностями масштабирования и стильным интерфейсом.

Не стесняйтесь настраивать внешний вид галереи с помощью CSS и изучать различные параметры и функции, предоставляемые Photoswipe. Это универсальный и настраиваемый инструмент, который поднимет ваши галереи изображений на новый уровень.

Так что давайте, попробуйте и раскройте свой творческий потенциал с помощью Photoswipe!