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

Первым будет плагин 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.