実際、それは非常に簡単に達成できます。基本的には、すべての Isotope 項目にクリック ハンドラーを追加するだけです。ハンドラーは、どの要素がクリックされたかを把握し (たとえば、クリックされたアイテムのクラス名をチェックしますが、もちろんさまざまな方法があります)、それぞれのコンテンツをdiv
要素に追加する必要があります。
コンテンツを所定の位置に表示する必要がある場合は、さらに簡単です。プレビューと完全なコンテンツを同じ Isotope アイテムに追加するだけで、デフォルトで完全なコンテンツを非表示にすることができます。
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
次に、すべての Isotope 項目にクリック ハンドラーを追加します。
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
他のアイテムを呼び出すこと.isotope("reLayout")
で、クリックしたアイテムが展開されたときに邪魔にならないように押し出されます。
div
最後に、要素を.big
大きくする基本的なCSSルールが必要.full
です。その場合、もちろん非表示にする必要があります。これはすべて CSS で行うことができ、JavaScript/jQuery は必要ありません。.big
div
.preview
わかりました、説明するのは少し面倒です - 例は1000語以上を言っていると思います: JSFiddle
もちろん、これは非常に基本的な例にすぎませんが、うまくいけば、私の言いたいことを説明できます。;)