Zara image zoom in effect

Question

Я пытаюсь выяснить, как достичь эффекта масштабирования изображения, который Zara использует для своих продуктов. Адрес сайта: http://www.zara.com/us/en/woman/t-shirts/floral-print-sweatshirt-c269189p1399011.html

Когда вы нажимаете на изображение, вы попадаете во всплывающее окно, где изображение растягивается, чтобы оно соответствовало всему экрану. Кто-нибудь знает аналогичный плагин jquery, который может достичь подобного эффекта?

Спасибо!

Answer 1

Это очень просто.

Я создал небольшую демонстрационную версию.

Демо URL: Demo

HTML код

<!-- Gallery --> 
<ul> 
    <li><a href='#'><img src='1.jpg' width='75px' /></a></li> 
    <li><a href='#'><img src='2.jpg' width='75px' /></a></li> 
    <li><a href='#'><img src='3.jpg' width='75px' /></a></li> 
</ul> 

<div> 
    <img src='' width='100%' /> 
</div> 

CSS код

* { 
    padding: 0; 
    margin : 0; 
} 
li { 
    list-style-type : none; 
    float : left; 
    margin : 10px; 
} 
div { 
    position : absolute; 
    left : 0; 
    top : 0; 
    bottom : 0; 
    right : 0; 
    opacity : 0.9; 
    display : none; 
    overflow : hidden; 
} 
div img { 
    position : absolute; 
    top : 0; 
    left : 0; 
} 

JavaScript код

$(function() { 

    //Clicked on small image 
    $('li a').click(function() { 
     $('div img').attr('src', $(this).find('img').attr('src')); 
     $('div').show(); 
     return false; 
    }); 

    //When we move mouse on div 
    $('div').mousemove(function(e){ 
     var h = $(this).find('img').height(); 
     var vptHeight = $(document).height(); 
     var y = -((h - vptHeight)/vptHeight) * e.pageY; 

     $('div img').css('top', y + "px"); 
    }); 

    //When we clicked on div 
    $('div').click(function(){ 
     $('div').hide(); 
    }); 
}); 

Я принял некоторые предположения. Это действует как доказательство концепции.

Дайте мне знать, если это поможет.