Небольшой 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();
});

Возможно вас это заинтересует
comments powered by HyperComments