Эффект лупы с помощью jqZoom
Статья от 10.06.09 в категории Javascript, jQuery
jqZoom – скрипт, использующий jQuery, реализующий эффект лупы для ваших изобращений. Его можно использовать в каталоге продукции, для отображения каких-либо карт, в галлереях фотографий и т.п. jqZoom лёгок в использовании и работает на всех основных браузерах.
jqZoom позволяет изменять тип увеличения, высоту, ширину, расположение и многое другое.
Небольшой пример
Для начала подключим необходимые .js и .css файлы:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script> <link href="jqzoom.css" type="text/css" rel="stylesheet" />
Используем следующую разметку:
<div id="content" style="margin-top: 100px; margin-left: 100px"> <a class="jqzoom" title="kawasaki" href="kawasakigreen.jpg"> <img title="kawasakigreen" style="border: #666 1px solid;" src="kawasakigreen_small.jpg" /> </a> </div>
В данном случае: kawasakigreen.jpg – исходное изображение, а kawasakigreen_small.jpg – уменьшенное. Класс jqzoom нам нужен для того, чтобы указать скрипту, с каким изображением работать. Для этого также можно использовать и идентификатор.
Теперь поставим выполнение скрипта на событие загрузки страницы:
$(document).ready(function(){ $('.jqzoom).jqzoom(); });
Скрипт разработан Марко Рензи. Подробную документацию и примеры вы можете найти на
23/06/09 в 15:30
Эффект лупы с помощью jqZoom…
Thank you for submitting this cool story – Trackback from progg.ru…
22/01/10 в 12:59
Привет!
Подскажи, пожалуйста, как и где изменить код jqzoom.1.0.1.js, чтобы при изменении исходных изображений изменялось и содержание на странице.
Т.е. если я при помощи скрипка изменяю href=”kawasakigreen.jpg”, например, на href=”kawasakiblack.jpg”, аналогично изменяю src=”kawasakigreen_small.jpg” на необходимую картинку, то изменятся изображение small, но почему-то изображение zoom (остается не изменным, хотя в DOM они изменяются?
P.S. Если тебе это поможет, то кратко, что происходит: Запрос на изменение картинок поступает при помощи обработчика событий, который далее подключается в асинхронном режиме к базе вытаскивает соответствующие данные и возвращает их браузеру, далее при помощи DOM меняю изоображения (записи в href и scr)
Помоги, пожалуйста