Галерея

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

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

Для работы достаточно создать контейнер и подключить его в экземпляре класса 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

Last updated