Всем привет! Давно не виделись) пора узнать Вам что-то новое. Данный урок приготовлен по просьбе наших читателей и в нем я затрону такую интересную тему как зуммеры, то бишь программные средства увеличения изображений, объектов и т.д. Скрипт JQuery Zoom написан на примере увеличения планет Солнечной системы, но понятное дело, можно его использовать и в других вариациях. Так как в данном примере изображения не большого разрешения, то пришлось использовать дополнительные изображения, которые расположены в папке, но если у вас есть высококачественные фотографии, то нужные участки вы можете увеличить с оригинальной фотографии и использовать их.
И так, начнем. Первое, что мы сделаем это индексный файл index.php. В данном файле нам обязательно надо подключить файлы CSS-стилей и библиотек JQuery, а также настроить размер, положение и анимацию областей увеличения изображения. Его код приведен ниже:
<div class='text'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"> </script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"> </script>
<script type="text/javascript" src="js/jquery.zoomtour.js"> </script>
<script type="text/javascript">
$(function() {
$('#zt-container').zoomtour();
});
</script>
<div class="container">
<div id="zt-container" class="zt-container">
<div class="zt-item" data-id="zt-item-1">
<img class="zt-current" src="images/image1.jpg" />
<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="850" data-delay="20" style="width:150px;height:111px;top:186px;left:50px;"></div><!--Первая область снизу-->
<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="14" data-speed="950" data-delay="150" style="width:111px;height:111px;top:69px;left:130px;"></div><!--Вторая область снизу-->
<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="9" data-speed="800" data-delay="70" style="width:25px;height:25px;top:67px;left:261px;"></div><!--Третья нижняя область-->
<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="12" data-speed="800" data-delay="150" style="width:40px;height:40px;top:37px;left:295px;"></div><!--Четвертая верхняя область-->
</div><!--Общие настройки анимации, положения и появления областей-->
<div class="zt-item" data-id="zt-item-3">
<a href="saturn.html"> <img src="images/image1_2.jpg"></a>
<img class="zt-current" src="images/image1_2.jpg"></a>
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="550" data-delay="20"></div>
</div><!--Первая область снизу-->
<div class="zt-item" data-id="zt-item-2">
<a href="jupiter.html"> <img src="images/image1_1.jpg"></a>
<img class="zt-current" src="images/image1_1.jpg" />
<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="6" data-speed="950" data-delay="150" style="width:80px;height:80px;top:320px;left:280px;"></div> <!--Размеры и положение второго увеличения-->
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="14" data-speed="750" data-delay="80"></div>
</div><!--Вторая область снизу-->
<div class="zt-item" data-id="zt-item-6">
<a href="pov_jupiter.html"> <img src="images/image1_5.jpg"></a>
<img class="zt-current" src="images/image1_5.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="12" data-speed="700" data-delay="20"></div>
</div><!--Вторая область снизу, второе увеличение-->
<div class="zt-item" data-id="zt-item-4">
<a href="mars.html"> <img src="images/image1_3.jpg"></a>
<img class="zt-current" src="images/image1_3.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="9" data-speed="700" data-delay="70"></div>
</div><!--Третья область снизу-->
<div class="zt-item" data-id="zt-item-5">
<a href="zeml.html"> <img src="images/image1_4.jpg"></a>
<img class="zt-current" src="images/image1_4.jpg" />
<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="12" data-speed="700" data-delay="10"></div>
</div><!--Четвертая область снизу-->
</div>
</div>
</div>
В подключенных файлах, есть стандартные библиотеки, а также созданная с нуля jquery.zoomtour.js.
Как раз таки в ней и происходит обработка зуммирования выбранных нами областей на первоначальной фотографии.
var dist_element;
switch( quadrant ) {
case 1 :
dist_element = Math.sqrt( Math.pow( ( center.x - 0 ), 2 ) + Math.pow( ( center.y - 0 ), 2 ) );
break;
case 2 :
dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ), 2 ) + Math.pow( ( center.y - 0 ), 2 ) );
break;
case 3 :
dist_element = Math.sqrt( Math.pow( ( center.x - 0 ), 2 ) + Math.pow( ( center.y - cache.ztdim.y ), 2 ) );
break;
case 4 :
dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ), 2 ) + Math.pow( ( center.y - cache.ztdim.y ), 2 ) );
break;
}
var anglefactor = 25;
var angle = ( ( cache.dist_center - dist_element ) / cache.dist_center ) * anglefactor;
switch( quadrant ) {
case 1 :
$tag.data( 'rotate', angle ).transform({'rotate' : angle + 'deg'});
break;
case 2 :
$tag.data( 'rotate', -angle ).transform({'rotate' : -angle + 'deg'});
break;
case 3 :
$tag.data( 'rotate', -angle ).transform({'rotate' : -angle + 'deg'});
break;
case 4 :
$tag.data( 'rotate', angle ).transform({'rotate' : angle + 'deg'});
break;
}
},
getElementQuadrant : function( c, cache ) {
if( c.x <= cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )
return 1;
else if( c.x > cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )
return 2;
else if( c.x <= cache.ztdim.x / 2 && c.y >= cache.ztdim.y / 2 )
return 3;
else if( c.x > cache.ztdim.x / 2 && c.y > cache.ztdim.y / 2 )
return 4;
}
},
viewport = {
zoom : function( $ztcontainer, $tag, cache, settings ) {
var $ztitem = $tag.closest('div.zt-item'),
ztitemid = $ztitem.data('id'),
$ztimage = $ztitem.children('img.zt-current'),
zoomfactor = $tag.data('zoom'),
speedfactor = $tag.data('speed'),
imgdelayfactor = $tag.data('delay'),
link = $tag.data('link'),
dir = $tag.data('dir'),
$new_ztitem = $ztcontainer.find('div.' + link),
$new_ztitemimage= $new_ztitem.find('img.zt-current'),
zoomAnimation = true;
if( !link ) return false;
if( zoomfactor === undefined || speedfactor === undefined || imgdelayfactor === undefined || dir === undefined )
zoomAnimation = false;
( dir === 1 ) ?
viewport.zoomin( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings ) :
viewport.zoomout( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings );
},
zoomin : function( $tag, $ztitem, ztitemid, $ztimage, zoomfactor, speedfactor, imgdelayfactor, zoomAnimation, $new_ztitem, $new_ztitemimage, cache, settings ) {
var el_l = $tag.data('left') + $tag.data('width') / 2,
el_t = $tag.data('top') + $tag.data('height') / 2;
$.fn.applyStyle = ( zoomAnimation ) ? $.fn.animate : $.fn.css;
$ztimage.applyStyle( {
width : cache.ztdim.x * zoomfactor + 'px',
height : cache.ztdim.y * zoomfactor + 'px',
left : - ( ( zoomfactor * ( 2 * el_l ) ) - ( 2 * el_l ) ) / 2 + 'px',
top : - ( ( zoomfactor * ( 2 * el_t ) ) - ( 2 * el_t ) ) / 2 + 'px'
}, $.extend( true, [], { duration : speedfactor } ) );
И конечно же, немаловажная часть скрипта это CSS стили, тут прописаны как и стандартные настройки тегов, так отображение нужных нам областей зуммирования.
.zt-container{
width:500px;
height:500px;
position:relative;
overflow:hidden;
margin:20px auto;
background:#fff;
border:7px solid #fff;
-moz-box-shadow:1px 1px 3px #ddd;
-webkit-box-shadow:1px 1px 3px #ddd;
box-shadow:1px 1px 3px #ddd;
}
img.zt-current{
position:absolute;
display:none;
}
img.zt-temp{
position:absolute;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.zt-tag{
position:absolute;
z-index:10;
border:2px solid #fff;
background:transparent url(../images/tag.png) repeat top left;
width:50px;
height:37px;
cursor:pointer;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.7);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.7);
box-shadow:1px 1px 2px rgba(0,0,0,0.7);
}
.zt-tag-back{
width:30px;
height:20px;
left:50%;
bottom:0px;
margin-left:-16px;
background:#fff url(../images/back.png) no-repeat center center;
-moz-border-radius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
border:1px solid #fff;
border-bottom:none;
}
Вот и все. На самом деле достаточно сложный скрипт JQuery Zoom, который украсит Ваш сайт и придаст эстетичности Вашим сайтам. Кстати, посмотрите еще урок на тему эффект zoom, может тоже пригодиться. Благодарю за внимание. Скоро увидимся, всем удачи!