1

作成中のカスタム wp テーマにポートフォリオ ギャラリーを追加しようとしています。私は、一部を変更することさえできるソリューションとプラグインを検索しようとすることに疲れ果てました. 解決策を見つける際の問題の 1 つは、達成しようとしていることに類似したものを見つけるのにどの検索用語が役立つかが完全にはわからないことだと思います..

現在、ナビゲーション用に次のdivがあります

<div id="tags" role="navigation">
<p>
<a class="portrait" href="#portrait">Portrait</a> / 
<a class="landscape" href="#landscape">Landscape</a> / 
<a class="sports" href="#sports">Sports</a> / 
<a class="nature" href="#nature">Nature</a> / 
<a class="weddings" href="#weddings">Weddings</a> / 
<a class="active" href="#">All</a>
</p>
</div>

私のナビゲーションの下には、画像の div があります。私がやりたいことは、画像ナビゲーションからカテゴリを選択して、特にタグ付けされた画像のみを表示できるようにすることです。私が望んでいないのは、そのタグ/選択のために新しいページを開くことです。選択したナビゲーションの画像を再編成またはフェードイン/フェードアウトしたいと考えています。

私が探しているものに似たスクリプトまたはプラグインがそこにあると確信しています。または、これを最もよく達成する方法についての少しのガイダンス/提案をいただければ幸いです。

前もって感謝します。

4

2 に答える 2

0

Quicksand jquery プラグインがそれを行います:

http://razorjack.net/quicksand/

Isotope プラグインについて:

http://isotope.metafizzy.co/

またはいくつかの css3 を使用して:

http://tympanus.net/Tutorials/CSS3FilterFunctionality/

于 2012-12-21T01:18:30.727 に答える
0

ID が「tagImages」の div があると仮定すると、各画像にアンカー クラスと同じ名前のデータ属性を指定すると、このコードが機能するはずです。

予想される HTML

<div id="tagImages">
    <img src="/location/image.jpg" data-category="portrait" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="weddings" />
</div>​

jQuery コード

$('#tags').on('click', 'a', function(e) {
    e.preventDefault();
    var cat = $(this).attr('class'),
        $tagImg = $('#tagImages').find('img');
    $tagImg.hide();
    if (cat === 'active') {
        $tagImg.show();
    } else {
        $tagImg.each(function() {
            if ($(this).data('category') == cat) {
                $(this).show();
            }
        });
    }
});​

これは、あなたが何を求めているかを示すjsFiddleの例です。

于 2012-12-21T01:31:10.770 に答える