Лупа для картинок easyzoom jQuery

В некоторых движках-магазинах я видел скрипт, который позволяет при наведении на картинку увеличивать ее часть в небольшом окне, причем увеличивается именно та часть картинки, на которую наведена мышь. Данный эффект называют лупой. Рассмотрим пример реализации.

Для того, чтобы сделать подобную лупу на jQuery нам понадобится готовая библиотека easyzoom.js и пару настроек. Предлагаю сразу посмотреть и скачать готовые примеры через кнопки ниже.

Если объяснить работу скрипта по-простому, то он вычисляет координаты мыши и в зависимости от нее в "ограниченном квадрате" строит увеличенное изображение с его настоящим масштабом. Все это осуществляется на лету с использованием jQuery.

Для установки подключите все js файлы. В скачанном примере вы увидите строку: <script> $(function () { $("a.easyzoom").easyZoom(); }); </script> Она отвечает за вывод фотографии на ссылке с классом easyzoom. Если посмотреть на то, как задается ссылка на картинку: <a href="img.jpg" class="easyzoom"><img src="img.jpg" style="width: 200px;"></a>, то первая картинка в ссылке <a></a> является версией для лупы, а вторая в теге <img> - уменьшенной копией. Естественно, как и у меня в примере две картинки могут быть одним и тем же файлом.

В примере очень важна css обработка #easy_zoom. Этот идентификатор является окном лупы. В стилях можно настроить его отступ относительно оригинальной картинки, ширину и высоту лупы. #easy_zoom не должен накладываться на уменьшенную картинку, иначе скрипт будет работать некорректно. Также, если вы загрузите в версию для лупы картинку маленького размера, например, 200 на 200px, то она не будет увеличиваться как нужно.