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([selector, mount])

Параметры

selector

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

mount

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

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

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

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

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

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

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

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

Кастомизация предпросмотра

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

Лицензия

Лицензия MIT