jquery - Fullscreen product view for eshop

Question

I am trying to find plugin or tutorial of product fullscreen view like on next sites:

http://www.armaniexchange.com/product/cotton+trench+coat.do?sortby=

or

http://store-us.hugoboss.com/boss/partner-water-resistant-hooded-coat/hbna50238757,en_US,pd.html&cgid=22000#!i%3D0%26color%3D001_Black

Maybe someone will provide me with a link?) Because I honestly didn't find anything usefull.

Small addition: What do I mean? On hugoboss website you can click "fullscreen view" below images or on armani site - "view larger". You will get to the fullscreen view. And I'm searching for something like this.

Thanks in advance.

BR, Nick K.

Answer 1

如果我正确理解您的问题 - 您正在寻找类似以下内容：

http://codecanyon.net/item/etalage/180719?ref=themespotters&ref=themespotters&clickthrough_id=119361192&redirect_back=true

编辑：

在这种情况下。在产品页面上，我可能会添加一个绝对定位的 div，其宽度和高度为 100%；

.product-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

然后您可以使用 jquery 打开和关闭它。

$(function() {
    $('#fullscreen').click(function() { //This is your "Full Screen" link
        $('.product-overlay').show();
    });

    $('.product-overlay #close').click(function() { // This is your close button
        $('.product-overlay').hide();
    });
});