Галерея

Общая информация

Компонент галереи помогает улучшить работу с большим количеством изображений без сплошного вывода в список.

Для работы достаточно создать контейнер и подключить его в экземпляре класса PipUI.Gallery , как это показано ниже

<div id="gallery1"></div>

<script>let gallery1 = new PipUI.Gallery('#gallery1', {});</script>

Экземпляр класса PipUI.Gallery принимает 2 аргумента

1. Элемент контейнера, где будет образована галерея

2. Объект опций

Чтобы загрузить список изображений, необходимо во втором параметре передать массив images.

Все элементы массива должны быть переданы в виде объектов. Каждый такой объект может содержать в себе следующие ключи

1. title - Название изображения

2. text - Описание

3. thumb - Превью, выводимое в списке изображений

4. large - Основное изображение, выводимое в контейнере

5. original - Оригинал изображения, который открывается при нажатии на основное изображение

Пример работы галереи

Javascript

Так как компонент галереи может работать исключительно через Javascript, то все настройки, за исключением стилей, можно произвести только через него.

Опции

// Выводить в консоль отладку
debug: false

// Массив изображений
images: []

// Разрешить двигать меню превью
scroll: true

// Функция обратного вызова при запуске изменения изображения
changeCallback: undefined

// Функция обратного вызова при завершении изменения изображения
changedCallback: undefined

// Функция обратного вызова при обновлении
updateCallback: undefined

// Функция обратного вызова при добавлении изображения в конец
pushCallback: undefined

// Функция обратного вызова при добавлении изображения в начало
unshiftCallback: undefined

// Использовать компонент изображений
useImage: false

// Выбранное по умолчанию изображение
active: 0

// Шаблоны верстки
templates: {
    // Враппер галереи
    wrapper: '...',
    
    // Элемент изображения
    image: ''
}

Методы

let gallery = new PipUI.Gallery('#gallery');

gallery.getID() // Вернет уникальный идентификатор галереи

gallery.setOptions(object) // Изменить опции галереи

gallery.getOptions() // Получить опции галереи

gallery.updateImages() // Обновить изображения

gallery.push(object) // Добавить изображение в конец

gallery.unshift(object) // Добавить изображение в начало

gallery.updateScroll() // Обновить позицию списка превью

gallery.active(index) // Сделать выбранное изображение активным

gallery.update() // Обновить содержимое

События

Триггер	Описание	Инициатор
change-gallery-pipui	Срабатывает при начале изменения изображения	.gallery
changed-gallery-pipui	Срабатывает по окончанию изменения изображения	.gallery
update-gallery-pipui	Срабатывает при обновлении содержимого	.gallery
update-images-gallery-pipui	Срабатывает при обновлении списка изображений	.gallery
push-gallery-pipui	Срабатывает при добавлении изображения в конец	.gallery
unshift-gallery-pipui	Срабатывает при добавлении изображения в начало	.gallery
update-scroll-gallery-pipui	Срабатывает при обновлении позиции скрола	.gallery