jQuery Zoom – увеличение изображения
Небольшой jQuery плагин который позволяет увеличивать изображение при наведении на него курсора мышки или при нажатии на нем. Так же поддерживается Touch событие. Настроек у него мало, только самые основные и несколько callback параметров. Подробнее о настройках в статье.
Активация плагина
html код:
1 2 3 | <span class='zoom' id='ex1'> <img src='/img/img.jpg' alt='Descr'> </span> |
jQuery код:
1 | $('#ex1').zoom(); |
Вот и все, плагин отлично работает, для обычной работы других настроек не требуется, но если все таки они нужны давайте рассмотрим остальные его возможности.
Опции
url – по умолчанию false – указывается путь к большой фотографии или вообще к другой фотографии. Если не параметр не используется то используется изображение на котором применен плагин;
on – по умолчанию mouseover – тип события которое инициирует событие увеличения. Возможны варианты: mouseover, grab, click, или toggle;
duration – по умолчанию 120 – скорость анимации событий анимации fadeIn/fadeOut;
target – по умолчанию false – Селектор или DOM-элемент, который должен быть использован в качестве родительского контейнера для увеличенного изображения;
touch – по умолчанию true – включает поддержку touch события;
magnify – по умолчанию 1 – масштаб увеличенного изображения;
callback – по умолчанию false – функция, которая вызывается, когда изображение загружается. Внутри функции “this” ссылается на элемент изображения;
onZoomIn – по умолчанию false – функция, которая вызывается, когда изображение увеличится. Внутри функции “this” ссылается на элемент изображения;
onZoomOut – по умолчанию false – функция, которая вызывается, когда изображение уменьшается после увеличения. Внутри функции “this” ссылается на элемент изображения.
Отключение плагина
1 | $('#example').trigger('zoom.destroy'); |
На официальном сайте плагина автор демонстрирует парочку хитростей с использованием плагина, например использование плагина jQuery Zoom и Colorbox.
1 2 3 4 5 6 7 8 | $(document).ready(function(){ $('a.photo').zoom({ url: 'photo-big.jpg', callback: function(){ $(this).colorbox({href: this.src}); } }); }); |
И еще 1 пример, насколько я понял, откладывает инициализацию плагина в случае если с изображением на станице происходят какие-то действия, например изменение размера, положение, добавление/удаление тегов и т.д.
1 2 3 4 5 6 7 | $(document).ready(function(){ $('img') .wrap('<span style="display:inline-block"></span>') .css('display', 'block') .parent() .zoom(); }); |
Источник: verstaemvse.ru