3

ここで起こっていることを Wordpressで角度のあるテーマで再現するのに非常に苦労しています。

post_thumbnails の表示をフィルタリングするアイソトープを取得できましたが、アニメーションは素晴らしいですが、画像をクリックするか、その投稿/ポートフォリオのコンテンツをリンクすると、新しい div に表示されます。理想的には、ボックスを邪魔にならないように配置して、モバイルを使用している場合は一番上までスクロールする必要がないようにします。

私が始めるための指針は素晴らしいでしょう。このようなものはどこにも見つからず、他の人にとって非常に役立つと思います:)

ありがとう

4

1 に答える 1

1

実際、それは非常に簡単に達成できます。基本的には、すべての 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 は必要ありません。.bigdiv.preview

わかりました、説明するのは少し面倒です - 例は1000語以上を言っていると思います: JSFiddle

もちろん、これは非常に基本的な例にすぎませんが、うまくいけば、私の言いたいことを説明できます。;)

于 2012-12-15T02:50:07.300 に答える