jQZoom – небольшой плагин для jQuery, написанный Marco Renzi. Я подумал, что этот плагин может пригодиться многим. jQZoom – это лупа, которую удобно использовать при ограниченном пространстве для размещения больших изображений. Вы легко сможете дать своим пользователям возможность рассмотреть детали изображения, перемещая лупу по миниатюре.

Как всегда – сначала небольшой пример, который продемонстрирует, как это может выглядеть, а потом уже мои пояснения. Наведите указатель мыши на миниатюру.

Вы можете сохранить исходный код примера и воспроизвести его на своем сайте.

Необходимые файлы подключаем в раздел HEAD, их два – это сама библиотека jQuery (кстати, не так давно появилась версия 1.2.3), и файл jquery.jqzoom.js.

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>

Что касается стилевого оформления – тут можно творить. Не забудьте только, что плагин использует имена классов, так что их лучше не менять. CSS-код я приводить не буду, его можно посмотреть в файле примера и к тому же он несложен.

А вот фрагмент HTML-кода отвечающий за отображение маленького изображения рассмотрим, поскольку тут будут нюансы.

<div class="jqzoom">
    <img src="zoom_img1_small.jpg" jqimg="zoom_img1_big.jpg" />
</div>

Картинка вставлена в элемент div с именем класса jqzoom. В принципе можно просто присвоить этот класс и тэгу img… С атрибутом src все ясно – относительный путь к файлу маленького изображения. Обратите внимание на некий атрибут jqimg. В качестве его значения выступает относительный путь к файлу большого изображения.

Не очень изящное решение, поскольку такой код заведомо не пройдет проверку на валидность, ведь такого атрибута не существует.

Ну и самое интересное – что надо добавить еще, чтобы это заработало? В самом простом случае, с настройками по умолчанию только это:

<script type="text/javascript">
$(document).ready(function(){
  $(".jqzoom").jqueryzoom();
});
</script>

Однако существуют и дополнительные опции, с помощью которых можно управлять отображением. Посмотрите такой вариант:

<script type="text/javascript">
$(document).ready(function(){
  $(".jqzoom").jqueryzoom({
    xzoom: 200,
    yzoom: 200,
    offset: 5,
    position: "right",
    preload:1
  });
});
</script>

Как обычно все «обернуто» функцией $(document).ready(function(){});, которая отслеживает момент готовности DOM. Дальше выбираем все элементы с именем класса jqzoom и вызываем для них плагин jqueryzoom, которому передаем дополнительные параметры.

xzoom – ширина элемента div, куда будет выводиться часть большого изображения. По умолчанию – 200px.

yzoom – высота элемента div, куда будет выводиться часть большого изображения. По умолчанию – 200px.

offset – отступ элемента div, куда будет выводиться часть большого изображения от основного изображения (миниатюры). По умолчанию – 10px.

position – положение элемента div, куда будет выводиться часть большого изображения. По умолчанию right.

Правда автор плагина не представил список допустимых значений, но можно догадаться, что помимо right, вероятно это еще и left.

preload – количество предварительно загружаемых больших изображений. По умолчанию – 1.