jquery フィルタリングの設定

購入したテンプレートを元に、htmlサイトを作成しています。
ほぼ無知なので、テンプレートに応用をなかなか利かせられず難儀しております。

ポートフォリオページの「All - category1 - category2」とフィルタリングできる画像サムネイルがあり、ページ読み込み時のデフォルトがAllになっています。が、画像が多すぎるためAllは削除し、category1で読み込みさせるにはどうしたら良いか知りたく、質問させていただきます。

htmlの
<a href="#" data-filter="*" class="filter_button filter_current">All</a>
<a href="#" data-filter=".a" class="filter_button filter_current">category1</a>
<a href="#" data-filter=".b" class="filter_button">category2</a>

この箇所を何とか変えてみましたが機能せず・・・jsファイルやcssの方での修正も必要でしょうか？

必要な情報は追記いたしますので、わかる方おりましたらよろしくお願いいたします。

質問者からの補足コメント

• 購入したテンプレートはこちらです
  http://themes.foxsash.com/buran/portfolio-square …
  All worksを外し、 illustrationのサムネイルのみでページを読み込ませるには？と言えば伝わりやすいでしょうか。。

    補足日時：2016/02/02 07:44

No.2 ベストアンサー 回答者： fujillin 回答日時： 2016/02/02 17:47

ANo1です。

＞クリックによるフィルタリングも動かない状態になってしまいます。
私の環境では、一応、動作はしているのですが・・・
（ご提示のページ全部のファイルをコピーするのは面倒なので、一部関連しそうな部分のみのコピーで試していますが）


ＨＴＭＬ内の
　<a href="#" data-filter=".xx" class="filter_button filter_current">XX</a>
に当たる部分を、初期状態としてフィルタリングした状態にしたい場合は、

custum.js内の以下の部分を
　　　// initialize isotope
　$container.isotope({
　　　itemSelector: '.oi_strange_portfolio_item',
　　　layoutMode: 'masonry'
　 });

　$('#filters a:first-child').addClass('filter_current');


次の様に修正して、動作しませんか？
（インデント等を全角空白にしていますので、コピペはしないように）
　　　// initialize isotope
　$container.isotope({
　　　itemSelector: '.oi_strange_portfolio_item',
　　　layoutMode: 'masonry',　// ←行末にカンマを追加
　　　filter: '.xx'　　　　　　　　　// ←この１行を追加。カンマなし
　 });

//　$('#filters a:first-child').addClass('filter_current');　←コメント行にして無効化します

この回答へのお礼

fujillinさま
具体的な記述、どうもありがとうございました。おかげで無事できました！！
お恥ずかしながら、'masonry'行末にカンマを打ってなかったのが動作しなかった原因のようです。
重ねてお礼申しあげます。

お礼日時：2016/02/03 02:40

No.1 回答者： fujillin 回答日時： 2016/02/02 12:53

こんにちは

HTMLというよりはスクリプトの問題ですね。
実装のままのソースなのか結構なボリュームになっているので、ちゃんと追いかけてはいませんが・・・


ご提示のページのご質問の部分は、Isotopeというライブラリを用いているようです。
http://isotope.metafizzy.co/

その初期設定部分が、custom.jsというスクリプトファイル内にあります。
　 // PORTFOLIO FILTERING - ISOTOPE
の部分がそれに当たりますが、
　　// initialize isotope
のところが、Isotopeの初期表示を設定しているところです。
Isotopeのデフォルトは全体表示になっていると思われますが、初期表示にフィルタをかけたければオプション指定で
　filter: '.illustration'
等を追加すれば、初期表示はそのフィルタをかけた状態になります。
（「illustration.」の部分は、フィルタであれば「.logos」でも「.motion」でも良いです）

ナビゲーションの「ALLWORKS」を削除してもしなくても、上記でフィルタは動作しますが、表示上ナビゲーションの選択表示との整合をとっておく必要があります。
すぐ下の行の
　 $('#filters a:first-child').addClass('filter_current');
がナビゲーションの選択状態を設定している部分にあたります。
上記の意味は、「ナビゲーションメニューの（Ａ要素の）一番最初のものを選択状態にする」という意味ですので、この部分を上記で変えた初期フィルターの設定と整合するようにしておいてください。

もしも、スクリプトが分からない場合は、この一行をコメントアウトしておいて、HTMLソース側の該当するA要素に「filter_current」のクラス設定をしておくことでも、初期設定として有効になるはずです。
（ご質問文で例示なさっているように、２箇所にfilter_currentの設定をするようなことはなさらないように）

※ ざっと見ただけでの回答ですので、見落としなどがあるかもしれません。
　ちゃんとした使い方は、上記のIsotopeのサイトまたは、テンプレートの説明書（←あるのかわかりませんが）などでご確認なさってください。

この回答へのお礼

fujillinさま
丁寧なご説明ありがとうございます！
早速 filter: '.xx'をご指摘の箇所（custom.jsファイル内、layoutMode: 'masonry' すぐ下）に追加し、
<a href="#" data-filter=".xx" class="filter_button filter_current">XX</a>
<a href="#" data-filter=".xxx" class="filter_button">XXX</a>
とhtmlソースに記述してみましたが、機能せず。。クリックによるフィルタリングも動かない状態になってしまいます。

isotopeサイトの方も見てみました。初期表示の設定を変える記述があるのか無いのか理解不能でした（汗）
誠にお手数ですが、上記の方法に不手際、足らない設定がありましたらご指摘いただけますと幸いです。

お礼日時：2016/02/02 16:29