humming

Лёгкий и компактный плагин для просмотра изображений

• Готовое к использованию решение
• Поддержка масштабирования, панорамирования, вращения
• Поддержка перехода между изображениями
• Поддержка горячих клавиш
• Поддержка мобильных устройств
• Пользовательская настройка просмотра

Онлайн демо

Установка

В браузере

<script src="<path>/lib/umd/index.js"></script>
<script>
    new Humming()
</script>

Require/Import

import Humming from 'humming-preview'
// const humming = require('humming-preview')
new Humming()

API

new Humming([селектор, монтирование])

Параметры

селектор

[необязательный] Выбор изображений для просмотра
Тип: строка | HTMLElement | массив HTMLElement
По умолчанию: document.querySelectorAll("img")

монтирование

[необязательный] Элемент, где будет монтироваться просмотрщик
Тип: HTMLElement
По умолчанию: document.body

Готовое к использованию решение

• Установите атрибут data-humming

Будут автоматически выбраны все изображения document.querySelectorAll("[data-humming] img")

• Установите атрибут data-humming-img

Будут автоматически выбраны все изображения document.querySelectorAll("[data-humming-img]")

Примечание

1. При наличии обоих способов выбора будут удалены повторяющиеся элементы
2. "Готовое к использованию решение" является необязательной конфигурацией
3. Элементы не обязательно должны быть тегами <img>, для других тегов требуется установить атрибуты data-preview или data-src, указывающие на адрес изображения для просмотра
4. Приоритет: data-preview > data-src > img.src

Горячие клавиши

• Предыдущее изображение: ↑
• Следующее изображение: ↓
• Увеличение масштаба: +
• Уменьшение масштаба: -
• Колесо мыши: увеличение/уменьшение масштаба

Пользовательская настройка просмотра

Установите атрибуты data-preview или data-src для указания адреса изображения для просмотра в нетегах <img>

Лицензия

Лицензия MIT