Как стать автором
Обновить

jQuery: jQZoom — лупа.

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

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




Download plugin

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

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



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

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

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


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


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

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

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

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

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

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

preload — количество предварительно загружаемых больших изображений. По умолчанию — 1.
Ist.
Теги:
Хабы:
+17
Комментарии 46
Комментарии Комментарии 46

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн