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

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

Преимущества плагина ClickZoomer

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

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

<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

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

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

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

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

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

    ИП Гришанин Кирилл Олегович
    ИНН 774313842609

    Подписаться на новости блога

      Подписаться на обновления блога

      Коворкинг Starthub

      Б. Новодмитровская ул., 36, стр. 12, вход 6,
      Москва, Россия, 127015

      Коворкинг Wework

      Ahad Ha'am 54,Tel Aviv-Yafo,Израиль

      © 2023 WB—Tech. Мы разрабатываем уникальные решения для компаний из России, США и Европы.