PipUI v2.0.0
  • 🌟Введиние
  • 🗃️Скачать
  • ⚠️Начало работы
  • Компоненты
    • Базовый набор
    • Отступы
    • Палитра цветов
    • Grid сетка
    • Панель навигации
    • Выпадающее меню
    • Постраничная навигация
    • Формы
    • Кнопки
    • Полосы прогресса
    • Меню навигации
    • Модальные окна
    • Оповещения
    • Подтверждения действий
    • BB-коды
    • Всплывающие подсказки
    • Вкладки
    • Хлебные крошки
    • Спойлеры
    • Галерея
    • Изображения
    • Таблицы
    • Панель BB-кодов
    • Валидаторы форм
    • Всплывающие блоки
    • Слайдер
    • Автозаполнение
    • Селектор тегов
    • Селекторы даты и времени
    • Блоки оповещений
    • Якоря
  • 📧Контакты
  • 🔁GitHub
Powered by GitBook
On this page
  • Общая информация
  • Javascript
  • Свойства
  • Методы
  1. Компоненты

Изображения

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

Last updated 2 years ago

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

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

Для работы компонента достаточно задать атрибут 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() // Переключить на следующее изображение
Пример работы кода выше
Пример работы кода выше