# Галерея

## Общая информация <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  |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.