Изображения
Общая информация
Компонент позволяет открывать изображения поверх всех элементов страницы на весь экран в отдельном модальном окне. Каждое изображение можно добавить в общую группу, в которой будет доступен для переключения только определенный набор изображений.
Для работы компонента достаточно задать атрибут data-image и указать в нем путь до открываемого изображения.
<img src="https://cdn.pipui.ru/media/images/image/0001-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0001.png">
<img src="https://cdn.pipui.ru/media/images/image/0002-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0002.png">
<img src="https://cdn.pipui.ru/media/images/image/0003-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0003.png">
<img src="https://cdn.pipui.ru/media/images/image/0004-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0004.png">
<img src="https://cdn.pipui.ru/media/images/image/0005-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0005.png">
<img src="https://cdn.pipui.ru/media/images/image/0006-small.png" alt="PIC" data-image="https://cdn.pipui.ru/media/images/image/0006.png">Чтобы разделить изображения на группы, необходимо определить атрибут
data-image-group а в качестве значения указать имя общей группы.
<!-- group 1 -->
<img src="https://cdn.pipui.ru/media/images/image/0001-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0001.png">
<img src="https://cdn.pipui.ru/media/images/image/0002-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0002.png">
<img src="https://cdn.pipui.ru/media/images/image/0003-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0003.png">
<img src="https://cdn.pipui.ru/media/images/image/0004-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0004.png">
<img src="https://cdn.pipui.ru/media/images/image/0005-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0005.png">
<img src="https://cdn.pipui.ru/media/images/image/0006-small.png" alt="PIC" data-image-group="group1" data-image="https://cdn.pipui.ru/media/images/image/0006.png">
<!-- group 2 -->
<img src="https://cdn.pipui.ru/media/images/image/0007-small.png" alt="PIC" data-image-group="group2" data-image="https://cdn.pipui.ru/media/images/image/0007.png">
<img src="https://cdn.pipui.ru/media/images/image/0008-small.png" alt="PIC" data-image-group="group2" data-image="https://cdn.pipui.ru/media/images/image/0008.png">
<img src="https://cdn.pipui.ru/media/images/image/0009-small.png" alt="PIC" data-image-group="group2" data-image="https://cdn.pipui.ru/media/images/image/0009.png">
<img src="https://cdn.pipui.ru/media/images/image/0010-small.png" alt="PIC" data-image-group="group2" data-image="https://cdn.pipui.ru/media/images/image/0010.png">Javascript
Вы можете управлять изображениями с помощью класса PipUI.Image. Методы и свойства данного класса являются статическими.
Свойства
// Выводить в консоль отладку
debug: false,
// Функция обратного вызова, срабатываемая при открытии модального окна
openCallback: undefined
// Функция обратного вызова, срабатываемая при закрытии модального окна
closeCallback: undefined
// Функция обратного вызова, срабатываемая при открытии следующего изображения
nextCallback: undefined
// Функция обратного вызова, срабатываемая при открытии предыдущего изображения
prevCallback: undefined
// Шаблоны
templates: {
// Шаблон модального окна
modal: ''
}Методы
PipUI.Image.getID() // Вернет уникальный идентификатор
PipUI.Image.setOptions(object) // Изменить опции
PipUI.Image.getOptions() // Получить опции
PipUI.Image.open(url, options) // Открыть изображение с указанными опциями
PipUI.Image.close() // Закрыть открытое изображение
PipUI.Image.prev() // Переключить на предыдущее изображение
PipUI.Image.next() // Переключить на следующее изображениеLast updated