同位体拡張/契約機能

StackOverflow https://stackoverflow.com//questions/22042409

  •  21-12-2019
  •  | 
  •  

質問

私はアイソトープに取り組んでいます - ペインが拡大して開くとマクドナルドの例の近くに取得したいです。

href="http://www.mcdonalds.de/produkte/Alle-Produkte" REL="nofollow"> http://www.mcdonalds.de/produkte/alle-produkte

http://jsfiddle.net/9zx6z/1/

高さ/幅

を設定するクラスがあります。 
$(".element-item").on("click", function() {
                that.highlightBlock($(this));

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

役に立ちましたか？

解決

既に基本を釘付けにして - CSSクラスopen

を介して「拡張」/「開く」アイソトープ要素の幅と高さを設定します。 
<li class="product open">
.

をトリガーし、 relayout -method

製品画像のズーミングは、前記クラスの存在に応じてCSS遷移を介して実装されています。

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

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

サムネイル画像の寸法を吹き飛ばすことはありません。 isotope要素へのopenを追加すると、サムネイルイメージのsrc-属性をURLに置き換えます。製品画像後者は、画像のdata-src-large-属性に格納されています。

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

McDonalds製品の実装には、同位体項目が含まれている親コンテナにCSSクラスitem-openを追加します。

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

このクラスに基づいて、 not を使用しているすべての同位体項目の不透明度は、CSSを介して、openクラスを割り当てられています。

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

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

ここでコードスニペットを上記のコードスニペットに合わせるのを見ることができます。 http： //codepen.io/fk/pen/dgazl/ （iSotope v1を使用）と http： //codepen.io/fk/pen/ohlvf/ （iSotope v2を使用） - 両方のエッジの周りの少し粗いが最新のクロムで働いています。

LOADESインジケーターを表示するようにSpin.jsを使用して、CSSクラス名をわずかに変更し、オリジナルのマクドナルド製品ページとは対照的に、マークアップ、ベンダープレフィックス、IE固有のフィルタを少し変更してください。握りやすく（うまくいけば） - 他のすべてはほぼ1：1のコピーです。

は、 isotope v1 にバンドルされているimagesloadedプラグインも注意してください。その問題、現在のスタンドアロン版のプラグイン高解像度製品画像をロードするときにそれを使用したい場合は、

JSFIDDLE JavaScriptには、あなたが周りを助けるためのいくつかのコメントが含まれています。
ここでの答えと組み合わせることを願って、これはあなたが現在あなたが現在どこに移動するかについてのいくつかのポインタを与えます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top