Picturajs

Легкая и мощная JavaScript библиотека для создания галерей изображений и видео

Документация

Основные возможности

Галереи изображений

Поддержка различных форматов изображений с группировкой

Видео контент

Интеграция с YouTube и другими видео платформами

Легкость использования

Простая настройка через data-атрибуты

Способы использования

Для указания полноразмерного изображения используйте атрибут data-full:

 <div class="gallery__wrapper"> <div class="gallery__item"> <img class="thumbnail" src="thumbnail.jpg" data-group="group1" data-full="full-size.jpg"> </div> </div>

Примечание: Атрибут data-group объединяет изображения в одну галерею для навигации.

Для изображений и видео можно использовать обычные ссылки:

<div class="gallery__wrapper"> <a class="gallery__item thumbnail" href="full-image.jpg" data-group="group2"> <img src="thumbnail.jpg"> </a> <!-- Для YouTube видео --> <a class="gallery__item thumbnail" href="https://www.youtube.com/watch?v=VIDEO_ID" data-group="group2"> <img src="video-thumbnail.jpg"> </a> </div>

Если не указан data-full или href, библиотека использует src изображения:

<div class="gallery__wrapper"> <div class="gallery__item thumbnail" data-group="group3"> <img src="image.jpg"> </div> </div>

Для отдельных изображений или видео:

<a class="thumbnail" href="https://www.youtube.com/watch?v=VIDEO_ID" data-group="single"> Открыть видео </a>

Инициализация JavaScript

После подключения библиотеки инициализируйте Picturajs:

 new Pictura({ gallerySelector: ".gallery-page, [data-gallery-two], .video", transitionEffect: "fade", plugins: { zoom: { maxScale: 3, step: 1, controlsEnabled: true } } });

Параметры конфигурации

Параметр	Тип	По умолчанию	Описание
`gallerySelector`	String	`".gallery"`	CSS селектор для поиска галерей
`transitionEffect`	String	`"slide"`	Эффект перехода: "slide", "fade"
`plugins`	Object	`{}`	Настройки плагинов (автозагрузка)

Обязательные классы и атрибуты

Атрибут/Класс	Обязательный	Описание
`thumbnail`	Да	CSS класс для активации Picturajs
`data-group`	Рекомендуется	Группировка элементов для навигации
`data-full`	Опционально	URL полноразмерного изображения
`href`	Опционально	Альтернатива data-full для ссылок

Установка и подключение

Загрузка файлов

Для работы библиотеки необходимо подключить CSS и JavaScript файлы:

CSS файл

Основные стили:

picturajs.min.css

Скачать CSS

JavaScript файл

Основная библиотека:

picturajs.min.js

Скачать JS

Подключение в HTML

<!-- CSS в секции head --> <link rel="stylesheet" href="path/to/picturajs.min.css"> <!-- JavaScript перед закрывающим тегом body --> <script src="path/to/picturajs.min.js"></script>

Плагины

Автозагрузка плагинов: При передаче параметров в секции plugins происходит автоматическая дозагрузка соответствующего плагина.

Доступные плагины

Zoom Plugin

Плагин для масштабирования изображений с поддержкой жестов.

Параметры:

maxScale - максимальный масштаб (по умолчанию: 3)
step - шаг масштабирования (по умолчанию: 0.5)
controlsEnabled - показать элементы управления

Пример использования:

plugins: { zoom: { maxScale: 5, step: 1, controlsEnabled: true } }

picturajs-zoom.min.js Скачать

Share Plugin

Плагин для добавления кнопок социального шаринга.

Параметры:

networks - массив социальных сетей
position - позиция кнопок ("top", "bottom")
style - стиль кнопок ("default", "minimal")

Пример использования:

plugins: { share: { networks: ['facebook', 'twitter', 'vk'], position: 'top', style: 'minimal' } }

picturajs-share.min.js Скачать

Thumbnails Plugin

Плагин для отображения миниатюр в нижней части галереи.

Параметры:

showThumbnails - показывать миниатюры
thumbnailsPerRow - количество в ряду
position - позиция ("bottom", "top")

Пример использования:

plugins: { thumbnails: { showThumbnails: true, thumbnailsPerRow: 6, position: 'bottom' } }

picturajs-thumbnails.min.js Скачать

Fullscreen Plugin

Плагин для полноэкранного режима просмотра.

Параметры:

enableFullscreen - включить полноэкранный режим
doubleClickToFullscreen - двойной клик для перехода
exitOnEsc - выход по клавише Esc

Пример использования:

plugins: { fullscreen: { enableFullscreen: true, doubleClickToFullscreen: true, exitOnEsc: true } }

picturajs-fullscreen.min.js Скачать

Комплексное использование плагинов

 new Pictura({ gallerySelector: ".gallery-page, [data-gallery-two], .video", transitionEffect: "fade", plugins: { zoom: { maxScale: 3, step: 1, controlsEnabled: true }, share: { networks: ['facebook', 'twitter', 'vk'], position: 'top' }, thumbnails: { showThumbnails: true, thumbnailsPerRow: 6 }, fullscreen: { enableFullscreen: true, doubleClickToFullscreen: true } } });