同位素擴展/縮小功能

我正在研究一種同位素 - 我希望在窗格擴大和打開時儘可能接近mcdonald示例。同位素擴展/縮小功能

http://www.mcdonalds.de/produkte/alle-produkte

我有一個類，設置

$(".element-item").on("click", function() { 
       that.highlightBlock($(this)); 

       $("#filter").click(); 
      });

來源

2014-02-26 The Old County

你已經釘基礎的高度/寬度 - 設置寬度和高度爲「擴大」/「打開「通過CSS類的同位素元素open

<li class="product open">

然後觸發同位素的reLayout-方法。

產品形象的變焦是通過根據存在CSS轉換實現的說類：

.product-image { 
    width: 148px; 
    height: 148px; 
    transition: all 0.4s ease-in-out; 
} 

.product.open .product-image { 
    width: 308px; 
    height: 308px; 
}

但就吹起來的縮略圖尺寸不會很好看：然後加入open對於同位素元素，我們因此會將縮略圖圖像的src-屬性與URL一起替換爲更大版本的產品圖像。後者是存儲在data-src-large -attribute圖像：

<img class="product-image" data-src-large="product_preview.png" src="product_thumbnail.png" data-src-standard="product_thumbnail.png">

麥當勞產品頁面上的實施也增加了一個CSS類item-open其內的同位素項目都包含在父容器：

<ul id="isotope" class="isotope item-open"> 
    <li class="product open"> ... 
    <li class="product"> ... 
    ...

基於這個類，所有同位素項目裏面做的不透明度不分配了open類減少，通過CSS再次：

.item-open .product { 
    opacity: 0.15; 
} 

.item-open .product.open { 
    opacity: 1; 
}

你可以看到CodePens符合上述這裏的代碼片段：http://codepen.io/fk/pen/dGAzl/（使用同位素V1）和http://codepen.io/fk/pen/ohLvF/（使用同位素V2） - 周圍的邊緣都比較粗糙，但在最新的Chrome工作。

請注意，我使用spin.js來顯示加載指示符，稍微更改了CSS類名稱，並省去了一些標記，供應商前綴和IE特定的過濾器，而不是原始的McDonalds產品頁面更容易掌握（希望;）） - 其他的幾乎都是1：1的副本。

還要注意的是自帶的bundled with Isotope v1 imagesLoaded-插件有其problems，你會可能會更好過使用當前standalone version of the plugin如果你想用它來確定加載高分辨率的產品形象的時候。

jsFiddle JavaScript包含幾條評論來幫助你。
我希望結合這裏的答案，這會給你一些關於如何從你現在所在的地方繼續前進的指針。

來源

2014-02-28 19:41:24

http://jsfiddle.net/9zX6z/20/另一個變種 - 一種熱或不熱 –

同位素擴展/縮小功能

回答

相關問題