Показать Меню
falbar Увеличение картинки

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали!

Увеличение картинки

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.

Необходимость привлечения всё большего и большего числа потенциальных клиентов сподвигает разработчиков сайтов-рекламщиков, лейдингов, сайтов-портфолио придумывать просто умопомрачительные эффекты, часть из которых собрана в нашем сегодняшнем плагине. Сразу отмечу, плагин далеко не стандартный, при его использовании происходит не просто увеличение картинки (или подгрузка изображения с большим расширением), а создается эффект приближения к ней. Есть различные вариации, как достигнуть такого эффекта: несколько стандартных решений можно увидеть в демо.

На примере текста на ветках хорошо показаны возможности этого скрипта и его особенность. Также можно поместить нужные блоки в контейнер и относительного его применять плагин (зумирование). Такой способ увеличения картинки наверняка привлечёт пользователя.

Теперь рассмотрим пример реализации материалов, прикрепленных к этой статье.

Подключаем скрипты:

<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.9 – указываем относительное увеличение размера (значения 0.0-1.0);
  • scalemode: "both" – указываем масштаб содержимого экрана в зависимости от размера (значения "width"|"height"|"both");
  • duration: 450 – задаем продолжительность анимации в миллисекундах;
  • easing: "ease" – задаем функцию смягчения анимации (значения "linear"|"ease"|"ease-in"|"ease-out"|"ease-in-out"|[p1,p2,p3,p4]);
  • nativeanimation: true – указываем браузеру использовать ли родную анимацию движка webkit (собственно актуально только для «гугл хром»);
  • root: $(document.body) – указываем корневой элемент, по отношению к которому будет производится зумирование (важно! Он должен быть отпозиционирован);
  • debug: false – включаем/отключаем отображение логов в консоли;
  • animationendcallback: null – указываем колбэк функцию;
  • preservescroll: false – запрещаем/разрешаем отмену зумирования при скроллинге.
Источник
github.io

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

Комментариев еще не оставлено