Открываем серию статей о программных решениях, которые мы используем в своей работе.
Первым будет плагин 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.
Если хотите убедиться, что все делаете правильно, или проконсультироваться по поводу разработки вашего проекта, напишите нам.
