# Изображения ## Общая информация Компонент позволяет открывать изображения поверх всех элементов страницы на весь экран в отдельном модальном окне. Каждое изображение можно добавить в общую группу, в которой будет доступен для переключения только определенный набор изображений. Для работы компонента достаточно задать атрибут `data-image` и указать в нем путь до открываемого изображения. ```html PIC PIC PIC PIC PIC PIC ``` {% embed url="" %} Пример работы кода выше {% endembed %} Чтобы разделить изображения на группы, необходимо определить атрибут\ `data-image-group` а в качестве значения указать имя общей группы. {% hint style="info" %} Имя группы может быть любым для каждой из групп, но мы рекомендуем использовать осмысленные имена. {% endhint %} ```html PIC PIC PIC PIC PIC PIC PIC PIC PIC PIC ``` {% 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() // Переключить на следующее изображение ``` --- # 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/image.md?ask= ``` 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.