Изображения

Общая информация

Компонент позволяет открывать изображения поверх всех элементов страницы на весь экран в отдельном модальном окне. Каждое изображение можно добавить в общую группу, в которой будет доступен для переключения только определенный набор изображений.

Для работы компонента достаточно задать атрибут 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 а в качестве значения указать имя общей группы.

Имя группы может быть любым для каждой из групп, но мы рекомендуем использовать осмысленные имена.

Пример работы кода выше

Javascript

Вы можете управлять изображениями с помощью класса PipUI.Image. Методы и свойства данного класса являются статическими.

Свойства

Методы

PreviousГалереяNextТаблицы

Last updated