> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/gallery.md).

# Галерея

## Общая информация <a href="#general-information" id="general-information"></a>

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

Для работы достаточно создать контейнер и подключить его в экземпляре класса <mark style="color:orange;">`PipUI.Gallery`</mark> , как это показано ниже

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

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

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

1. Элемент контейнера, где будет образована галерея
2. Объект  опций

{% hint style="info" %}
Чтобы загрузить список изображений, необходимо во втором параметре передать массив **images**.
{% endhint %}

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

1. title - Название изображения
2. text - Описание
3. thumb - Превью, выводимое в списке изображений
4. large - Основное изображение, выводимое в контейнере
5. original - Оригинал изображения, который открывается при нажатии на основное изображение

{% embed url="<https://codepen.io/pipui/pen/ZEMqVBV>" %}
Пример работы галереи
{% endembed %}

## Javascript

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

### Опции <a href="#options" id="options"></a>

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

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

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

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

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

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

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

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

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

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

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

### Методы <a href="#methods" id="methods"></a>

```javascript
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  |