15 января 2014
5090
zoom, зуммер, jquery

JQuery Zoom

JQuery
Демонстрация » Скачать »

Всем привет! Давно не виделись) пора узнать Вам что-то новое. Данный урок приготовлен по просьбе наших читателей и в нем я затрону такую интересную тему как зуммеры, то бишь программные средства увеличения изображений, объектов и т.д. Скрипт 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, может тоже пригодиться. Благодарю за внимание. Скоро увидимся, всем удачи!