Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.
Необходимость привлечения всё большего и большего числа потенциальных клиентов сподвигает разработчиков сайтов-рекламщиков, лейдингов, сайтов-портфолио придумывать просто умопомрачительные эффекты, часть из которых собрана в нашем сегодняшнем плагине. Сразу отмечу, плагин далеко не стандартный, при его использовании происходит не просто увеличение картинки (или подгрузка изображения с большим расширением), а создается эффект приближения к ней. Есть различные вариации, как достигнуть такого эффекта: несколько стандартных решений можно увидеть в демо.
На примере текста на ветках хорошо показаны возможности этого скрипта и его особенность. Также можно поместить нужные блоки в контейнер и относительного его применять плагин (зумирование). Такой способ увеличения картинки наверняка привлечёт пользователя.
Теперь рассмотрим пример реализации материалов, прикрепленных к этой статье.
Подключаем скрипты:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js" type="text/javascript"></script>
HTML:
<div id="container">
<div id="content">
<object class="tree" data="tree.svg" width="720" height="720" type="image/svg+xml" >
<embed class="tree" src="tree.svg" width="720" height="720" type="image/svg+xml" />
</object>
<div class="label" id="label1">
An apple does not fall far from the tree.
</div>
<div class="label" id="label2">
Who reaches for the spruce, falls down onto the juniper.
</div>
</div>
</div>
В эту структуру входит обёртка, при клике по которой будет возвращаться исходное состояние id=container. У блоков с текстом добавлен class=label, по клику по нему скрипт будет создавать эффект приближения. Контейнер с id=content используется для отцентровки содержимого относительно окна браузера у пользователя.
CSS стили следующие:
#container{
width: 100%;
height: 100%;
overflow: hidden;
background-color: white;
}
#label1{
left: 160px;
top: 105px;
width: 90px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
}
#label2{
left: 460px;
top: 285px;
width: 150px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
}
div.label{
padding: 10px;
font-family: Helvetica Neue;
font-size: 12px;
line-height: 14px;
position: absolute;
color: #aaa;
-webkit-user-select: none;
-moz-user-select: none;
}
div.label:hover{
color: #333;
cursor: pointer;
cursor: hand;
}
.tree{
pointer-events: none;
}
#content{
position: relative;
margin-top: 0;
margin-left: auto;
margin-right:auto;
width: 750px;
}
Стили используются только для оформления и не влияют на работу скрипта, всё, что ему необходимо, он допишет сам. В частности, при помощи внутреннего CSS, текст развешивается как грозди на ветке.
JavaScript:
$(document).ready(function(){
$("#container").click(function(evt){
evt.stopPropagation();
$(this).zoomTo({
duration: 1000,
targetsize: 1.0
});
});
$(".label").click(function(evt){
evt.stopPropagation();
$(this).zoomTo({
duration: 1000,
targetsize: 0.6
});
});
});
Вот и сам код. Тут отслеживается событие клика по блоку-обёртке и по тексту, после чего идет вызов плагина.
Напоследок рассмотрим настройки нашего плагина зумирования. Отмечу, что использовать их просто и можно воспользоваться двумя вариантами: непосредственно передавать плагину параметры со значениями или дописывать атрибуты вида data-название_настройки в структуре HTML.
- targetsize – указываем относительное увеличение размера (значения 0.0 - 1.0);
- scalemode – указываем масштаб содержимого экрана в зависимости от размера (значения «width» | «height» | «both»);
- duration – задаем продолжительность анимации в миллисекундах;
- easing – задаем функцию смягчения анимации (значения «linear» | «ease» | «ease-in» | «ease-out» | «ease-in-out» | [p1, p2, p3, p4]);
- nativeanimation – указываем браузеру использовать ли родную анимацию движка webkit (собственно актуально только для «гугл хром»);
- root – указываем корневой элемент, по отношению к которому будет производится зумирование (Важно! Он должен быть отпозиционирован);
- debug – включаем/отключаем отображение логов в консоли;
- animationendcallback – указываем колбэк функцию;
- preservescroll – запрещаем/разрешаем отмену зумирования при скроллинге.