同位素扩展/缩小功能

我正在研究一种同位素 - 我希望在窗格扩大和打开时尽可能接近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/另一个变种 - 一种热或不热 –

同位素扩展/缩小功能

回答

相关问题