Плагин ClickZoomer

16 февраля 2013
Плагин ClickZoomer

Открываем серию статей о программных решениях, которые мы используем в своей работе.

Первым будет плагин ClickZoomer для jQuery, который по клику приближает произвольные участки больших изображений. Например, на модели молекулы иммуноглобулина на сайте Visual Science.

Похожую задачу решают плагины, имитирующие увеличительное стекло. Наведение мыши на фрагмент миниатюры открывает соответствующую область большого изображения. На момент написания статьи такой способ использовался на сайте Wildberries, Sotmarket и во многих других интернет-магазинах. К сожалению, такие плагины не работают на тач-устройствах и чаще всего требуют дополнительного пространства на экране.

Преимущества

  • Фокусирует внимание на нескольких выбранных участках, не позволяя просматривать произвольные участки. Это удобно для диаграмм и моделей, объясняющих принципиальное устройство каких-то объектов.
  • Работает на всех типах устройств, поддерживает тач-события.
  • Быстро работает, легко настраивается и интегрируется в сайт.

Исходный код примера

<link rel="stylesheet" href="/wbt.clickzoomer.css">  <script src="/wbt.clickzoomer.js"></script> <script>  $(function() {      $("#clickzoomer-example").wbtClickZoomer({          "points": [              {"x": 324, "y": 712, "src": "sample-zoom-1.jpg"},              {"x": 2014, "y": 648, "src": "sample-zoom-2.jpg"}       ],         "createPointDelay": 100,        "animationSpeed": 300,        "lensImage": "magnify.png",       "zoom": 4    });})</script><img id="clickzoomer-example" src="/sample.jpg" width="600" height="600">

Опции

НазваниеОписание
pointsМассив точек, в которых изображение можно приблизить. Каждая точка — объект из трёх значений: координат X и Y центра точки на большом изображении и пути к приближенной картинке. Array
createPointDelayЗадержка в миллисекундах между появлением точек при инициализации плагина. Integer
animationSpeedВремя анимации в миллисекундах при приближении к точке. Integer
lensImageПуть к альтернативной иконке, обозначающей точку, где изображение можно приблизить. String
zoomКоэффициент увеличения, который будет учитываться при анимации. Integer

Скачать плагин можно в GitHub.

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

Подпишитесь на блог WB—Tech

Никакого спама, только анонсы новых статей!

Над статьей работали
Кирилл Гришанин
Последние 10 лет руковожу командой аналитиков, дизайнеров и разработчиков

Наши клиенты

WBTech - Клиенты - МТС
WBTech - Клиенты - Высшая Школа Экономики
WBTech - Клиенты - Лента
WBTech - Клиенты - Верный
WBTech - Клиенты - Рамблер
WBTech - Клиенты - Совкомбанк
WBTech - Клиенты - Билайн
WBTech - Клиенты - Леруа Мерлен
WBTech - Клиенты - Ульяна Сергеенко
WBTech - Клиенты - Правительство Москвы
ИП Гришанин Кирилл Олегович
ИНН 774313842609
Коворкинг Starthub
Б. Новодмитровская ул., 36, стр. 12, вход 6, Москва, Россия, 127015
Коворкинг Wework
Ahad Ha'am 54,
Tel Aviv-Yafo,
Израиль