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.
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.
