ZoomiJS 📸

Простая и легкая JavaScript-библиотека для автоматического открытия изображений в модальном окне. Никаких зависимостей, просто подключи и пользуйся!

✨ Возможности

• 🖼️ Автоматическое открытие — все изображения на странице открываются в модальном окне
• 🎯 Множественные селекторы — можно указать несколько классов через запятую (.img1, .img2, .img3)
• 🏞️ Независимые галереи — изображения группируются по контейнерам, стрелки навигации появляются только внутри своей группы
• 🔍 Зум с Drag — увеличивай и перетаскивай изображение пальцем или мышкой
• ⌨️ Управление с клавиатуры — ESC для закрытия, стрелки для навигации по галерее
• 🚫 Исключения — можно пропускать изображения по селектору или внутри ссылок
• 📝 Подписи — автоматически подставляются из alt или title
• 🎨 Полностью кастомизируемый — все элементы имеют свои CSS классы
• 📱 Адаптивный — отлично работает на мобильных устройствах
• ⚡ Легкий — 22.4 KB минифицированный, 11.2 KB после gzip-сжатия
• 🔧 Простая настройка — интуитивный API с понятными опциями
• 🎭 Режим одиночного просмотра — если не нужна галерея, стрелки не появляются
• 🔄 Динамическое обновление — можно менять настройки на лету через updateOptions
• 🗑️ Уничтожение экземпляра — полная очистка событий при необходимости

⚙️ Настройки (Options)

Опция	Тип	По умолчанию	Описание
selector	string	'img'	CSS селектор(ы) для изображений (можно несколько через запятую)
excludeSelector	string	null	CSS селектор для исключения изображений
skipLinkedImages	boolean	true	Если true, изображения внутри тега <a> не открываются в модальном окне, а работают как обычные ссылки
galleryContainer	string	null	null
zoomStep	number	0.1	Шаг увеличения при зуме колёсиком
preloadCount	number	2	Сколько изображений предзагружать в галерее
navButtonClass	string	'simple-image-modal-nav'	Класс для кнопок навигации в галерее
modalClass	string	'simple-image-modal'	Класс для модального окна — можно переопределить для своих стилей
modalContentClass	string	'simple-image-modal-content'	Класс для контейнера с контентом
closeButtonClass	string	'simple-image-modal-close'	Класс для кнопки закрытия
captionClass	string	'simple-image-modal-caption'	Класс для подписи под изображением
closeOnClick	boolean	true	Закрытие по клику на фон
closeOnEsc	boolean	true	Закрытие по клавише ESC
showCaption	boolean	true	Показывать подпись (alt/title)
enableZoom	boolean	true	Включить зум
maxZoom	number	3	Максимальный коэффициент зума
animationDuration	number	300	Длительность анимации в мс
swipeThreshold	number	50	Минимальное расстояние в пикселях для распознавания свайпа при навигации по галерее

📋 Методы API

Метод	Параметры	Возвращает	Описание
open(img)	img: HTMLImageElement	void	Открывает модальное окно с указанным изображением
close()	—	void	Закрывает модальное окно
isOpen()	—	boolean	Проверяет, открыто ли модальное окно
next()	—	void	Переходит к следующему изображению в текущей галерее
prev()	—	void	Переходит к предыдущему изображению в текущей галерее
resetZoom()	—	void	Сбрасывает масштаб изображения к исходному
updateOptions(options)	options: Object	void	Обновляет настройки экземпляра
destroy()	—	void	Уничтожает экземпляр и удаляет модальное окно из DOM
getCurrentImage()	—	HTMLImageElement | null	Возвращает текущее открытое изображение
getGalleryImages()	—	HTMLImageElement[]	Возвращает массив всех изображений в текущей галерее

📋 Статические методы

Метод	Возвращает
Zoomi.version;	2.0.0
Zoomi.defaults;	Объект настроек по умолчанию

📦 Примеры использования

Галерея товаров в интернет-магазине

const productGallery = new Zoomi({
    selector: '.product-thumbnail',
    galleryContainer: '#product-gallery',
    enableZoom: true,
    showCaption: false,
    closeOnClick: true
});