全屏查看產品

Question

我試圖找到插件或產品全屏視圖的教程就像下一站點：

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

或

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

也許有人會給我提供一個鏈接？）因爲我真的沒有發現任何有用的東西。

小加法： 這是什麼意思？在hugoboss網站上，您可以點擊圖片下方或阿瑪尼網站上的「全屏視圖」 - 「查看更大」。 您將進入全屏視圖。我正在尋找這樣的東西。

在此先感謝。

BR， 尼克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(); 
    }); 
});