Qudrat Qodirov

jQuery Zoom – увеличение изображения

Небольшой jQuery плагин который позволяет увеличивать изображение при наведении на него курсора мышки или при нажатии на нем. Так же поддерживается Touch событие. Настроек у него мало, только самые основные и несколько callback параметров. Подробнее о настройках в статье.

Активация плагина

html код:

jQuery код:

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

Опции

url – по умолчанию false – указывается путь к большой фотографии или вообще к другой фотографии. Если не параметр не используется то используется изображение на котором применен плагин;
on – по умолчанию mouseover – тип события которое инициирует событие увеличения. Возможны варианты: mouseovergrabclick, или toggle;
duration – по умолчанию 120 – скорость анимации событий анимации fadeIn/fadeOut;
target – по умолчанию false – Селектор или DOM-элемент, который должен быть использован в качестве родительского контейнера для увеличенного изображения;
touch – по умолчанию true – включает поддержку touch события;
magnify – по умолчанию 1 – масштаб увеличенного изображения;
callback – по умолчанию false – функция, которая вызывается, когда изображение загружается. Внутри функции “this” ссылается на элемент изображения;
onZoomIn – по умолчанию false – функция, которая вызывается, когда изображение увеличится. Внутри функции “this” ссылается на элемент изображения;
onZoomOut – по умолчанию false – функция, которая вызывается, когда изображение уменьшается после увеличения. Внутри функции “this” ссылается на элемент изображения.

Отключение плагина

На официальном сайте плагина автор демонстрирует парочку хитростей с использованием плагина, например использование плагина jQuery Zoom и Colorbox.

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

ДЕМО Исходники

Источник: verstaemvse.ru

Обсуждение закрыто.