> 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/image.md).
# Изображения
## Общая информация
Компонент позволяет открывать изображения поверх всех элементов страницы на весь экран в отдельном модальном окне. Каждое изображение можно добавить в общую группу, в которой будет доступен для переключения только определенный набор изображений.
Для работы компонента достаточно задать атрибут `data-image` и указать в нем путь до открываемого изображения.
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
Чтобы разделить изображения на группы, необходимо определить атрибут\ `data-image-group` а в качестве значения указать имя общей группы.
{% hint style="info" %}
Имя группы может быть любым для каждой из групп, но мы рекомендуем использовать осмысленные имена.
{% endhint %}
```html
```
{% embed url="" %}
Пример работы кода выше
{% endembed %}
## Javascript
Вы можете управлять изображениями с помощью класса PipUI.Image. Методы и свойства данного класса являются статическими.
### Свойства
```
// Выводить в консоль отладку
debug: false,
// Функция обратного вызова, срабатываемая при открытии модального окна
openCallback: undefined
// Функция обратного вызова, срабатываемая при закрытии модального окна
closeCallback: undefined
// Функция обратного вызова, срабатываемая при открытии следующего изображения
nextCallback: undefined
// Функция обратного вызова, срабатываемая при открытии предыдущего изображения
prevCallback: undefined
// Шаблоны
templates: {
// Шаблон модального окна
modal: ''
}
```
### Методы
```javascript
PipUI.Image.getID() // Вернет уникальный идентификатор
PipUI.Image.setOptions(object) // Изменить опции
PipUI.Image.getOptions() // Получить опции
PipUI.Image.open(url, options) // Открыть изображение с указанными опциями
PipUI.Image.close() // Закрыть открытое изображение
PipUI.Image.prev() // Переключить на предыдущее изображение
PipUI.Image.next() // Переключить на следующее изображение
```