写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して
カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。
ページ上に表示する要素が数多くある場合に有効な機能になったりしますが
そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。
jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法
まずは動作のサンプルから。
下記画面の上部にあるカテゴリリンクをクリックすると
そのカテゴリの種類で絞り込まれた状態で画像が表示されます。
フィルタ用のリンクをクリックすることで
サイズの縮小とフェードのアニメーションが付いた形で
画像がフィルタリングされます。
このフィルター機能の全体構成について、
まずはHTMLから。
◆HTML <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a> | <a href="javascript:void(0);" class="cat">CAT</a> | <a href="javascript:void(0);" class="food">FOOD</a> | <a href="javascript:void(0);" class="view">VIEW</a> | <a href="javascript:void(0);" class="flower">FLOWER</a> </div> <div id="filterlist"> <ul> <li class="cat"><a href="#"><img src="img/cat1.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view1.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food1.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat2.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat3.jpg" alt="" /></a></li> <li class="flower"><a href="#"><img src="img/flower1.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat4.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view2.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food2.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view3.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food3.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat5.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat6.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food4.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view4.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat7.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food5.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat8.jpg" alt="" /></a></li> <li class="flower"><a href="#"><img src="img/flower2.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view5.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat9.jpg" alt="" /></a></li> <li class="food"><a href="#"><img src="img/food6.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat10.jpg" alt="" /></a></li> <li class="view"><a href="#"><img src="img/view6.jpg" alt="" /></a></li> <li class="cat"><a href="#"><img src="img/cat11.jpg" alt="" /></a></li> </ul> </div>
フィルタ用の（カテゴリ分け用）リンク一式と、
表示リストはそれぞれ任意のIDで囲います。
フィルタする際の判別については、
リンクに任意の名前のクラスを付けて
表示リストでフィルタする要素に対してもリンクと同じクラスを付けます。
————————————————————
・フィルタ用リンク
＜a href=”javascript:void(0);” class=”cat”＞○○○○＜/a＞
・表示リスト
＜li class=”cat”＞○○○○＜/li＞
————————————————————
これらはフィルタするリンクと表示リストのクラスが
同じ名前になっていれば、どんな名前でも大丈夫です。
CSSに関しては特に重要な項目はありませんが
サンプルでのHTMLソースに対してのCSSは以下の様になっています。
◆CSS
/* #filter
--------------------------- */
#filter {
margin: 0 auto;
padding: 15px 0;
width: 550px;
text-align: center;
}
#filter a:link { text-decoration:underline; color: #000;}
#filter a:visited { text-decoration:none; color: #000;}
#filter a:active { text-decoration:none; color: #000;}
#filter a:hover { text-decoration:none; color: #000;}
#filter .active {
font-weight: bold;
}
#filter a.active:link { text-decoration:none; color: #000;}
#filter a.active:visited { text-decoration:none; color: #000;}
#filter a.active:active { text-decoration:none; color: #000;}
#filter a.active:hover { text-decoration:none; color: #000;}
/* #filterlist
--------------------------- */
#filterlist {
margin: 0 auto;
width: 550px;
text-align: left;
}
#filterlist ul {
margin: 0 auto;
padding: 0;
width: 550px;
text-align: left;
}
#filterlist ul li {
margin: 5px;
width: 100px;
text-align: left;
float: left;
display: inline;
overflow: hidden;
}
#filterlist ul li img {
width: 100px;
float: left;
}
/* =======================================
ClearFixElements
======================================= */
#filterlist ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#filterlist ul {
display: inline-block;
overflow: hidden;
}
サンプル画面のレイアウトを形成する内容になっています。
そして実際の動作実行用のスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $setFilter = $('#filter'),
$setList = $('#filterlist'),
$setFilterAll = $('.allitem');
var showFade = 1500,
showShut = 1500,
hideFade = 1000,
hideShut = 1000;
var $setFilterBtn = $setFilter.children('a'),
$setFilterList = $setList.children('ul').children('li'),
$filterAllItem = $setFilterAll.attr('class');
$setFilterBtn.click(function(){
if(!($(this).hasClass('active'))){
var filterClass = $(this).attr('class');
$setFilterList.each(function(){
if($(this).hasClass(filterClass)){
$(this).css({display:'block'});
$(this).find('*').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'100px'},showShut);
} else {
$(this).find('*').stop().animate({opacity:'0'},hideFade);
$(this).stop().animate({width:'0'},hideShut,function(){
$(this).css({display:'none'});
});
}
});
$setFilterBtn.removeClass('active');
$(this).addClass('active');
}
});
$setFilterAll.click(function(){
$setFilterList.each(function(){
$(this).css({display:'block'});
$(this).find('*').stop().animate({opacity:'1'},showFade);
$(this).stop().animate({width:'100px'},showShut);
});
});
$setFilterAll.click();
});
</script>
フィルタ用のリンクがクリックされた際に、自分が持っているクラスを取得して
表示リストの中の同じクラスが付いているものを表示、
それ以外は非表示、といった処理をしています。
スクリプト開始部分にある
—————————————
var $setFilter = $(‘#filter’),
$setList = $(‘#filterlist’),
$setFilterAll = $(‘.allitem’);
—————————————
は上から
—————————————
・フィルタ用リンク一式を囲うエリアのID名
・表示リストを囲うエリアのID名
・「すべて表示」リンク用のクラス名
—————————————
となっているので、
HTML側のID／クラス名を変更する場合は、
ここでの名前も変更しておきます。
表示／非表示の際のアニメーションのスピードは
下記でそれぞれ設定を変更することも出来ます。
—————————————
var showFade = 1500,
showShut = 1500,
hideFade = 1000,
hideShut = 1000;
—————————————
は上から
—————————————
・表示する際のフェードアニメーション時間
・表示する際のスライドアニメーション時間
・非表示になる際のフェードアニメーション時間
・非表示になる際のスライドアニメーション時間
—————————————
フィルタリングする際のアニメーションがうっとおしい場合は
スクリプト内のwidthの値を変えてアニメーションしている部分を変更することで
単純なフェードでフィルター動作を実装させることも可能かと思っています。
クラスを付けるだけでフィルター機能が付けれるシンプルな構成にしているので
Webページ上でフィルター機能が必要になった際に是非。。。
はじめまして。
いつも参考にさせていただいております。
こちらの記事も大変参考になったのですが、
フィルタを複数選択可能にして「AかつB」のものを表示するような動きは可能でしょうか？
お知恵を頂けたらありがたいです。よろしくお願いします！
＞cleverdogさん
コメントありがとうございます！
返信遅くなりました。。
ご質問頂きました、複数選択可能にして
「AかつB」といった表示についてですが
この記事で紹介している見た目の場合、
ページロード時にすべての画像を表示している構成になるので
フィルター用リンクをクリックすることで
その該当のカテゴリアイテムが消える、といった構成になってしまうかと思われます。
動作サンプルを用意してみましたので
下記URLより動作の方ご確認ください。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringEliminate.zip
ページロード時はすべてのアイテムが選択状態で
クリックするごとに選択状態が解除されるイメージです。
ご確認よろしくお願いします。
いつも拝見させていただき、大変役立っており感謝です。
上の方と同じような質問なのですが、このフィルタリングをチェックボックスで動作（よく不動産会社のサイトなどにある、条件で絞り込みのように）させたいのですが、可能でしょうか？
自分なりに色々模索しているのですが、うまくいきません。
お知恵をいただければ幸いです。
よろしくお願いします！
＞やすの木さん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいているようで嬉しく思っております。
ご質問いただきましたチェックボックスでの動作についてですが
単純にチェックボックスにチェックが入っているかどうかを見て
切り替えを実行させる仕様になるかと思いますが
試しにその様な動作サンプルスクリプトを用意してみましたので
下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringCheckbox.zip
ご確認ください。
よろしくお願いします。
はじめまして。
参考にさせていただき、大変勉強になっています。
このフィルタ機能を使いたいと思っているのですが
最初に表示されるカテゴリを「allitem」、全部ではなく、
他のカテゴリ、例えば「cat」から表示させる事は可能でしょうか
jQueryを使い始めて日も浅く、判り易くシンプルだったのでこのフィルタ機能を選んだのですが
「allitem」だと数が多すぎるため、最初に表示するカテゴリ名を作ってそちらを先ず表示したい等と
欲をかいております。
可能なのでしょうか。
お知恵拝借、並びにご教授頂ければ幸いと思い、コメント差し上げました。
何卒宜しくお願い致します。
>BlackFlag 様
大感謝です！！
大変助かりました。 ありがとうございました。
＞す すさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
スクリプト45行目の
————————————-
$setFilterAll.click();
————————————-
のところが最初に表示させる要素の処理になっているので
ここを
————————————-
$(‘.cat’).click();
————————————-
といったように表示させたいカテゴリのクラス名を指定することで
可能になるかと思います。
（アニメーション動作は実行されてしまいますが・・・）
お試しください。
よろしくお願いします。
＞やすの木さん
ご返信ありがとうございます。
サンプルがお役に立ったようでよかったです。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
>BlackFlag 様
ありがとうございます。
大感謝です。もしかしたら出来ないかと思っていたので、流石だなぁと驚嘆するばかりです。
換えるところはそこだったんですね。
うまく行きました。いけそうです。
何より、素人でほんとに申し訳ないところ、丁寧に教えて下さったのに感動しております。
また何かの際には頼らせて頂ければと思っております。その際にも何卒宜しくお願い致します。
本当に有難う御座いました。
はじめまして。
まだwebをはじめて間もないのでとても参考になっております。
一つご質問があります。
画像をクリックすると拡大表示にするにはどのようにしたらいいでしょうか。
お助け頂けると嬉しです。
何卒よろしくお願いいたします。
＞sonaさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいているようで嬉しく思っております。
ご質問いただきました画像クリックで拡大表示ですが
この記事で紹介しているスクリプトは特に変化させず、
HTML側の＜a＞タグに対して拡大用のJPEGにリンクを張ったり
拡大表示させるjQueryプラグインなどを使用することで実現可能かと思っております。
お試しください。
よろしくお願いします。
BlackFlag 様
ご返信大変遅くなりました。
ありがとうございます。
お教え頂いたやりかたで拡大表示ができました。
本当にありがとうございました！！
大変参考になりました。
ありがとうございます。
質問なのですが、写真が大量の場合、ひとつのページだとスクロール回数が増えるので、２ページ目も作った場合、両方のページでフィルタをかける事はできるのでしょうか。
また、フィルタをかけた場合、フィルタをかけて表示される画像の量によってページのheightを長くしたり短くしたりする事は可能でしょうか。
質問だらけですみませんが、教えて頂けると助かります。
宜しくお願いします。
＞meggieさん
コメントありがとうございます。
このフィルタ機能スクリプトがお役に立った様で
とても嬉しく思っております。
ご質問いただいた件ですが
HTMLファイルが2つに分かれてしまっている場合は厳しいかと思います。
ページをHTMLファイルで分けずに1ページ内で切り替える際には
HTMLとCSS構成をうまくやれば実現できるかもしれません。
フィルタをかけた際のページの高さについては
現状のサンプルが画像の量によってheightの長さが変わる構成になっているので
サンプルファイルをダウンロードしてみて
動きの方、ご確認いただければと思います。
よろしくお願いします。
お返事ありがとうございました。
画像をいっぱい使う場合は一つのページにまとめないといけないんですね。。
美容室のヘアスタイル写真のページを作っていて、大量になるので悩んでいたところでした。
heightは変わりました！
ありがとうございました。
探していたソート機能そのものだったので、とっても感謝しています。
ありがとうございました。
はじめまして。
素人な私は検索もままならず、わかる限りのワードでこちらにたどり着きました。
欲しかった機能そのもので大変感謝しています。
ありがとうございました。
ちなみに参考サイトとしてこちらのURLをリンクすることは可能でしょうか？
すいません、aboutのほう拝見させて頂いて、リンクフリーとなっていたので貼らせて頂きます！
今後も勉強させて頂きます！
＞nugoさん
コメントありがとうございます。
このフィルタスクリプトがお役に立った様で
嬉しく思っております。
リンクについても
バナーまで設置していただき
ありがとうございました。
また何かありましたら
ご連絡くださいませ。
よろしくお願いします。
はじめまして、
当方初心者でいつも参考にさせていただいています！
最初で非表示（何も表示されない）からスタートすることは可能でしょうか？
＞kusakaさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
その様な動作は想定していなかったのですが
無理やりやろうとするとなると、
スクリプト45行目の「$setFilterAll.click();」を削除して
CSS側で「#filterlist ul li」で指定している
「width」の値を0にすることで実現できるのではないかと
思っております。
お試しください。
よろしくお願いします。
早速の回答ありがとうございます！
ただ何もないスペースが出来るみたいです。
もう少しやってみます。
ありがとうございます！
＞kusakaさん
ご確認ありがとうございます。
高さ自体も無くす場合は
CSS「#filterlist ul li」に対して
「display:none」を追記すれば消えるのではないかと思います。
お試しください。
よろしくお願いします。
BlackFlag様
できました！
ありがとうございました!!
初めまして、
フィルタリング機能について調べてたどり着きました。
利用及び改変フリーということで改造して遣わさせていただき、
自分用のRSSリーダーにフィルタ機能が搭載できました。
ありがとうございます。
質問なのですが、私はcakephpとmysqlを利用して自分専用のRSSリーダーを作成し
jquery:autopagerを使ってスクロールするとどんどん古い記事を読みだすようにしていますが、
2ページ目以降にフィルターを反映させるにはどうすればよろしいかアドバイスを頂けないでしょうか？
私は#filterlistをid指定ではなくclass指定にすればできると思ったのですが無理でした。
ご教授よろしくお願いします。
＞ネコスキーさん
コメントありがとうございます。
このフィルタ機能をご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
当記事のスクリプトはページロード時にのみに実行される構成になっているので
スクリプト全体を適宜functionで囲って
ページロード時と、「jquery:autopager」が動作する度に
それぞれ実行させるようにすることで動作するのではないかと考えております。
お試しください。
よろしくお願いします。
アドバイスありがとうございます。
さっそく試してみます！
初めまして。
jQueryを使ったフィルタ機能を色々探しておりましたところ、たどりつきました。
とてもわかりやすく、大変勉強になりました。
有難うございました。
ちなみに、カテゴリリンクにセレクトメニュー＜select＞~＜/select＞を利用することは可能でしょうか。
差支えなければご回答いただければ幸いです。
宜しくお願い致します。
＞ぱこさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
当記事のフィルタ機能は選択したボタンに付いているCSSクラスと
リスト上のCSSクラスが同じものに対して動作する構成になっていますので
セレクトにした際にはoptionに対して、ボタンに付いているCSSクラスを同等に付与して
セレクトを切り替えた際にoptionの値を見ることで実現可能かと思っております。
（すみませんがサンプル作る余裕がないので説明のみになります。。）
お試しください。
よろしくお願いします。
お忙しい中ご返信有難うございます！
早速試してみたいと思います。
成功しましたら連絡させていただきます＾＾
探していたものが見つかってすごく嬉しく使わせてもらおうと思っています。
今、複数選択可能なjQueryFilteringEliminateを使おうと思っていますが、
現段階だと、いらない条件のものをクリックして解除していく形ですが、
逆に、最初は全表示で、猫をクリックすると猫だけ、さらに犬をクリックすると
猫と犬
といったようには出来ないでしょか？
ご教授よろしくお願いします。
＞こまさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました動作仕様についてですが
「jQueryFilteringEliminate」のアクティブ状態とそうでない時のスクリプト動作を逆にして
「ALL」ボタンクリック時には全てのリスト表示の動作を実行させることで
可能かと思っています。
（時期的にサンプルを用意する時間が取れませんがご容赦ください。）
お試しください。
よろしくお願いします。
＞BlackFlag様
早速ありがとうございました。
最初のjQueryFilteringも参考にして試して見ます。
何分知識がとぼしいので怪しいのですが。
お忙しいところご返信いただきありがとうございます。頑張ります！
BlackFlag様、はじめまして。
当方、超初心者で色々と参考にさせてもらっていますが、このフィルタリング機能（文字検索でのフィルタリングではなく）に
ページング機能（フィルタを実行した時は自動で表示件数に合わせたページ数になる）をmixしたものは可能でしょうか？
ほとほと困っております。
ご教授いただけたら嬉しいです。
何卒よろしくお願い致します。
＞こまさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
仰られている動作仕様が少々把握できない部分があるのですが
サンプルはフィルタリング機能になりますので
ページング機能はまたスクリプト構成が変わってくるかと思っております。
こちらの記事で紹介しているプラグインが
もしかしたら理想の動作に近いのではないでしょうか。
・リスト要素を簡単にページネーションを付けて分割することができるjQueryプラグイン「jPages.js」
http://black-flag.net/jquery/20120418-3765.html
ご確認ください。
よろしくお願いします。
＞BlackFlag様
返信有難うございます。
自分のコメントを読み返してみて、分かりにくい内容だと新ためて思いました。すみませんでした。
具体的に書いてみますと、
ALLで200項目あったとして、フィルタリングのCATで100項目、FOODで70項目になった場合、
これにページング機能を加え、1ページ20項目で表示するとすれば、ALLで10ページ、CATで5ページ、
FOODで4ページというように、自動的にページングされるようにしたいと思っていますが、
超初心者で知識がとぼしく、ほとほと困っております。
ご教授よろしくお願い致します。
＞ヒデさん
実装されようとしている動作内容について
把握することができました。
当記事のスクリプトではその様な機能は実装していないのですが
先にお伝えした「jPages.js」プラグインと併用することで
実現させることは可能になるかと思っております。
フィルタリング用リンクをクリックさせる事に
「jPages.js」のプラグインを実行させる形になると思いますので
当記事のスクリプト内の35行目と36行目の間くらいに
「jPages.js」のプラグインを実行させる
——————————————
＄（●●●●）.jPages（）;
——————————————
を記述して構成することで実現できるかと思っております。
想定での返答になってしまいますがお試しください。
よろしくお願いします。
BlackFlag様
いつも参考にさせて頂いております。
初心者の自分にも非常に分かり易くてとても勉強になっています！
こちらのフィルタ機能をシンプルに実装する方法のCAT、FOODなどの各項目をクリックすると選択中のものが太字になるためどれを選択しているのかが分かります。
現在の各項目の文字を仮にボタンなどの画像にした場合に、現在選択中の項目がどれだか判るようにする事はできるのでしょうか。
もし実現できるようであればお教えいただけますと幸いです。
よろしくお願いいたします。
＞mofuさん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきましたリンクの選択状態の装飾に関してですが
選択状態の場合はリンク要素に対して
CSSクラス「active」がつくようになっておりますので
CSSの15行目にある「#filter .active」の部分を
ボタンが選択された装飾にすることで
実現することが可能になると思います。
お試しください。
よろしくお願いします。
早速のご返信ありがとうございます。
CSSの15行目
————————————————————————
#filter .active {
background-image: url(file:///●●/●●.png);
}
#filter a.active:link { text-decoration:none; color: #000;}
#filter a.active:visited { text-decoration:none; color: #000;}
#filter a.active:active { text-decoration:none; color: #000;}
#filter a.active:hover { text-decoration:none; color: #000;}
————————————————————————
にしましたところクリックで画像に変わるようになりました。
しかし前の画像(クリック前)の背面に表示されている形でして、クリックで元の画像を非表示にする方法がありましたらどうかご教示頂けないでしょうか。お忙しいところ無理言って本当に申し訳ございません。どうかよろしくお願いいたします。
＞mofuさん
実際にどのような構成で組み込まれているか
ページを確認させていただかない限り何とも言えないのですが
ボタンをimgタグで実装している場合は
—————————–
#filter .active img{
visibility: hidden;
}
—————————–
のような記述を追加して、
アクティブの状態の時には画像を非表示する指定を
追加してみてはいかがでしょうか。
憶測の回答になりますがお試しください。
よろしくお願いします。
いつも拝読させて頂いております。ありがとうございます。
checkboxタイプを利用させて頂ければと思い、現在格闘中なのですが、
一つの画像に複数のclassを付与することはできないでしょうか？
class=”cat view”のようにして、
catにチェック、又は、viewにチェック、又は、両方にチェックしている際に、
表示されればと考えております。
（現状だと、片方のチェックを外した際に消えてしまうようです。）
何卒よろしくお願い致します。
何度もすみません。
私のアバターではないアバターが表示されているようなので、
メールアドレスを変えて再度投稿させていただきました。
＞たしさん
コメントありがとうございます。
チェックボックスのフィルタリングスクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただきました動作仕様についてですが
いろいろ調整してみましたが
もともとその様な仕様を想定しておりませんでしたので
このスクリプト構成だと実現は厳しいかもしれません。。
またその様な仕様でのスクリプトが出来ましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
BlackFlag様
ご返信ありがとうございます。
またいろいろと調整を試みて頂きましたようで、誠に感謝しております。
今後も引き続き更新を楽しみにしております。
この度は本当にありがとうございました。
お世話になります。
いつもこちらを参考にさせていただいております。
前者さまの質問などを参考に
アニメーションを無くしたシンプルなフィルタにし
任意の部分から閲覧ができるようになりました。
現在、あるデザイン事務所さまのサイトを
いろいろと勉強させていただきながら制作しておりますが
なぜかIE 11やIE 8などで見ると
フィルタが為されずに、画像の表示数が多く
ページの途中で切れてしまう現象が起きてしまいました。
HTMLもCSSも初心者な若輩者なので
ご教授していただけますと
幸いでございます。
【サイトはこちらになります】
http://chic-design.net/sample
個人的には、CSSの記述に
誤りがあるような気がしておりますが
正直、さっぱりお手上げといったところでして…
あくまで私見的な憶測ですので
もしかしたらCSSが原因ではないのかもしれませんが
大きく書き換えた変更箇所がこのCSS部分になります。
お時間を割かせてしまうのも大変恐縮ですが
ご教授のほどよろしくお願いいたします。
＞大西さん
コメントありがとうございます。
このフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきましたページが「Not Found」で見れないのですが・・・
URLをご確認いただけますでしょうか。
よろしくお願いします。
いつも拝読しております。
また、個人的にも色々と利用させてもらっております。
今回、こちらのフィルタをページに実装しようと思って格闘中です。
楽天のGOLDを使用し、ショップのページにインラインフレームを使って組み込もうと思うのですが、どうしても高さの指定をしないとうまく表示されません。width=100% height=100%としてみたのですが、画像の半分がきれてしまいます。
また、出来ればCLASSを変えることで高さも自動調整できるようにしたいのですが、何か良い方法はございますでしょうか？
色々試みたのですが所詮素人ですのでなかなかうまくいかず、管理人様のお力をお借りしたい次第です。
あともう一つ、img画像で大きさの違う画像を置くと縦長の画像（例えば600×900）の画像の前に空白ができてしまい、表示がそこからずれてしまいます。縦長の画像も上手く組み込めるような方法はございますか？
よろしくお願いいたします。
＞shigeさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
iframeでこの機能を組み込む場合については
iframe内のフィルタリング機能が実行完了した後に
エリア全体の高さを取得して親ページのiframeの高さに入れ込む、といった
処理を加える必要があるかと思っています。
iframeの操作については
———————–
・jQueryでiframe内のページから親ページを操作する方法
http://black-flag.net/jquery/20111129-3602.html
・jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法
http://black-flag.net/jquery/20110810-3406.html
———————–
こちらでも紹介させていただいていますので
ご参考にしていただければと思います。
画像の大きさ等についてはCSSで調整するか
Masonryプラグインのような異なる大きさのものを
綺麗にレイアウトしてくれるプラグイン等を
使用してみてはいかがでしょうか。
・グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」
http://black-flag.net/jquery/20121128-4371.html
お試しください。
よろしくお願いします。
Black Flag管理人様
早々のご回答感謝いたします。
ご提示頂いた方法（・jQueryでiframe内のページから親ページを操作する方法）を試みておりますが、なかなかうまくいきません。
フィルタのhtmlに以下のスクリプトを追加して、親ページの方にid=”iframe_parent”を追加してみたのですが、やり方としては合っているのでしょうか？
＊＊＊フィルタのHTMLタグ＊＊＊
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”＞＜/script＞
＜script type=”text/javascript”＞
$(function(){＊＊＊ここは省略です。＊＊＊＊
$(‘.Cl’).click();
});
＜/script＞
＊＊＊ここに記入追加？＊＊＊
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js”＞＜/script＞
＜script type=”text/javascript”＞
$(function(){
var frameWidth = $(‘#parent_iframe’,parent.document).width();
$(‘#container’).css({width:(frameWidth)});
var contentsHeight = $(‘#container’).height();
$(‘#parent_iframe’,parent.document).css({height:(contentsHeight)});
});
＜/script＞
本当に素人でして、初歩的な事すら間違っているのかもしれません。
お忙しいと思いますので、お時間のあるときにでもご回答頂ければ幸いです。
よろしくお願いします。
＞shigeさん
ご確認ありがとうございます。
すみませんが、スクリプト部分だけではなんとも問題を判断できず
実際に実装されようとしているページを拝見させていただけないと
解消方法も分からないです・・・
よろしくお願いします。
管理人様
先日は色々無茶を申しましてすみません。
もう一点、教えて頂きたいことがございます。
body内で表記されている”jQuery Filtering”の部分に日本語で補足をつけたり、画像のに日本語を挿入するとどうしても文字化けしてしまいます。
CSSのfont-familyを変更してもなかなかうまくいきません。
何か別のところに問題があるのでしょうか？
ご回答頂ければ幸いです。
よろしくお願いいたします。
＞shigeさん
日本語の文字化けに関しては
おそらく実装されようとしているファイルの文字コードが原因かと思われます。
ファイルの文字コードが「UTF-8」になっているかご確認ください。
よろしくお願いします。
いつも拝読しております。
また、個人的にも色々と利用させてもらっており
今回、こちらのフィルタをページに実装しようと思っておリますが、別のコメントでチェックボックスタイプのものでご相談ですが、こちらのフィルターは一つの種類のもので表示されますが２つの種類のフィルターは可能でしょうか？
例えばヘアカタログで
髪の長さ：ベリーショート・ショート・ミディアム・セミロング・ロング・ボウズ
イメージ：ナチュラル・オフィス・コンサバ・カジュアル
○○で○○のフィルターは可能でしょうか？
どうかご教授ください。
＞junさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
複数選択の想定はしておらず、そのような動作は少々厳しいかと思っております。
また複数選択可能な仕様でスクリプトが出来ましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
ブラックフラッグ様
コメント失礼いたします
他のページから遷移してきたときに最初にCATのアイテムを表示することはできますか？
できたらその方法を教えて下さい
＞たーぼうさん
コメントありがとうございます。
他のページから遷移した際に任意のアイテムを表示するには
遷移する際にURLに「#cat」のようにハッシュタグをつけて遷移するようにして
そのハッシュタグを判別してカテゴリリンクをクリックさせる動作を追加することで
可能になるかと思います。
（アニメーション動作は実行されてしまいます）
動作サンプルを用意しましたので下記URLからご確認ください。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringHash/index.html#cat
サンプルファイルかこちらからダウンロード可能です。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringHash.zip
サンプルファイル「index.html」内のスクリプト部分の最後
53行目から58行目に処理を追加してあります。
お試しください。
よろしくお願いします。
ブラックフラッグ様
サンプルありがとうございます
このフィルタリングがあるページをAとしたときに
Bというページから遷移したときはALLが表示されて
Cというページから遷移したときはCATが表示されるようにすることはできますか？
＞たーぼうさん
サンプルスクリプトを見ていただければなんとなく分かるかと思いますが
URLに「#cat」が付いていればCATが開かれ、付いていなければALLが開かれますので
リンクさせるURLにハッシュタグを付けるか付けないかによって変えることが可能です。
ご確認ください。
ブラックフラッグ様
ありがとうございます
そしておやすみのところすみません
Bというページからのリンクが
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringHash/index.html#cat
Cというページからのリンクが
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringHash/index.html#food
としたとき
スクリプトの部分を教えて下さい
＞たーぼうさん
カテゴリごとの表示方法については
用意したサンプルを見てもらえれば分かると思います。
仰っている動作仕様についても
サンプルで追記したスクリプトを見てもらって
それを元に少し調べたりすればすぐ実現することができるものなので
いろいろと調べてご自身でお試しいただいた方が
たーぼうさんのスキルアップにもつながると思いますよ。
よろしくお願いします。
いつも勉強させて頂いております。
教えて頂きたいことがございます。
写真にキャプションをつけたいのですがどのようにしたらよいのでしょうか？
ご教授いただけますと幸いです。
＞すぺいんさん
コメントありがとうございます。
このフィルタリングスクリプトをご検討いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
キャプションとなるテキスト要素を
単純にフィルタ表示用の＜li＞内に入れてもらえれば動くと思います。
当ブログの
http://black-flag.net/jquery/20120801-4016.html
このページで同様の仕組みを取り入れておりますので
併せてご確認いただければと思います。
よろしくお願いします。
ブラックフラッグ様
サンプルを元に学習したいと思います
お忙しい中お返事ありがとうございました
今後ますますのご活躍をお祈りいたします
はじめまして、まったくの初心者で申し訳ありません。
過去に他の方にお答えいただいているのですが、何とぞもう一度お願いします。
最初に表示させれるカテゴリを「cat」にするには
スクリプト45行目の
————————————-
＄setFilterAll．click（）;
————————————-
のところが最初に表示させる要素の処理になっているので
ここを
————————————-
＄（’.cat’）．click（）;
————————————-
といったように表示させたいカテゴリのクラス名を指定することで
可能になるかと思います。
とのことですが、スクリプト45行目を具体的にどのように変えるのでしょうか？
このように変えてみましたが、動きませんでした。
＄（‘．cat’）．click（function（）{
$setFilterList．each（function（）{
$（this）．css（{display:’block’}）;
$（this）．find（’*'）．stop（）．animate（{opacity:’1′},showFade）;
$（this）．stop（）．animate（{width:’100px’},showShut）;
}）;
}）;
＄（‘．cat’）．click（）;’
＞さっきーさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいているようで
うれしく思っております。
最初に表示させるカテゴリを変える際の調整についてですが
サンプルスクリプ45ト行目の1行のみを変更していただければ動作します。
その他の38行目なども変更せずに
サンプルスクリプトのままでご使用いただければと思います。
お試しください。
よろしくお願いします。
非常に分かりやすく実装も簡単で利用させていただこうと思っているのですが、レスポンシブでの対応はどうなのでしょうか。
一定の幅での表示しか不可能なのでしょうか。
例えばPCでの各コンテンツの幅を300pxとして、レスポンシブにした時にそのまま300pxでもいいのですが中央の揃わないのですがそういう時はどうしたらいいのでしょうか。
＞maiさん
コメントありがとうございます。
レスポンシブとしてPCとスマホで動作を制御するには
フィルタ用のリンクをクリックした時点でウィンドウサイズを取得して
制御を分岐する処理が必要になるかと思います。
実装してみて理想の動作にならない場合は
実装された画面のテストURLなどを教えていただけると
構成の調査もできるかと思います。
よろしくお願いします。
はじめまして
いつも、参考にさせていただいております
こちらのフィルタリング機能をホームページで使用させていただいております
現在フィルタリングしたいカテゴリが多くなり
見にくくなってしまいました
なので、カテゴリ選択部分をタブで、分けられればと思い模索しております
タブのページで、
http://black-flag.net/jquery/20151215-5858.html
http://black-flag.net/css/20110207-2559.html
上記を併用しようとしましたが、上手く動かせませんでした
独学で製作しており、知識が疎いため、タブも使用出来るやり方をお教えいただければなと思い
コメントさせていただきました
もしお時間がありましたら、お教えいただければ幸いです
以上、よろしくお願いいたします
＞えりさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいているようで
うれしく思っております。
ご質問いただきました件についてですが
実装されようとしている構成はフィルタ用リンク部分を
タブで切り替えるということでしょうか。
実際に実装されようとしている画面を確認させていただかないと
動作の問題となっている部分の判断ができないのですが
考えられることとしてはタブの切り替え動作（タブボタンクリック）をするたびに
当記事のフィルタリングスクリプトが実行されるように構成すれば
動作させることができるのではないかと思っております。
憶測での回答になってしまい申し訳ありませんが
お試しいただけると幸いです。
よろしくお願いします。
はじめまして。
まだwebをはじめて間もないのでとても参考になっております。
ご質問がございます。
1部の画像をＡＬＬで表示させないようにするのはどうしたらよいでしょうか？
ＡＬＬにはないけど、ＣＡＴにすると1枚だけＡＬＬにないものを表示させたいのですが、
可能ですか。
分かりにくい文章で申し訳ございませんが、お助け頂けると嬉しです。
何卒よろしくお願いいたします。
＞みゆさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいているようで
うれしく思っております。
ALLで特定の画像を除外する件についてですが
ALLをクリックしたときに任意のクラスを対象から外すようにすることで
実現できるかと思います。
当記事のサンプルスクリプトの動作から「.cat」のクラスがついたものを
ALLから除外する動作サンプルを用意しましたので
こちらから動作をご確認ください。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringExclusion/
記事内のサンプルスクリプトで言う
39行目と40行目の間に特定のクラス（ここでは「cat」）を
外す処理を追加しています。
スクリプトの追加と併せて
CSSの方にも「.cat」のクラスはデフォルトで非表示にしておくために
「display:none;」を付けるようにしています。
用意したサンプルでは除外するクラスを「cat」にしていますが
ここのクラス名を実装するものに合わせて適宜変更してもらえればと思います。
サンプルファイル一式はこちらからダウンロードできます。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringExclusion.zip
お試しください。
よろしくお願いします。
お忙しい中、早速のお返事ありがとうございます。
ＡＬＬからＣＡＴ全体を非表示にするのではなく、ＣＡＴの中のcat1.jpgだけを
ＡＬＬに表示させないことは可能でしょうか？
度々のご質問になってしまい申し訳ございませんが、
よろしくお願い致します。
＞みゆさま
ご確認ありがとうございます。
サンプルで「cat」のクラスを対象外にしたのはあくまで一例で
同様の方法で対象外のクラスを表示させたくない画像のみに付与すれば可能になります。
昨日のサンプル内にて、対象外にするクラス名を「notAll」に変更し、
「cat」の中の一枚だけ（cat1.jpg）に「notAll」を付けた形で調整しましたので
ご確認いただければと思います。
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringExclusion/
http://black-flag.net/devel/jQueryFiltering/jQueryFilteringExclusion.zip
よろしくお願いします。
初めまして、いつも参考にさせて頂いております。
過去のコメントで二度同じ質問をされており、大変心苦しいのですが、他サイトやいろいろ試してみたものの全く動作してくれず途方にくれてしまったので、お忙しいとは思いましたが、お力添え頂きたくコメントさせて頂きます。
最初に表示させれるカテゴリを指定するのは
スクリプト45行目の
————————————-
＄setFilterAll．click（）;
————————————-
のところが最初に表示させる要素の処理になっているので
ここを
————————————-
＄（’.cat’）．click（）;
————————————-
といったように表示させたいカテゴリのクラス名を指定することで
可能になるかと思います。
とのことですが、その通り変更させて頂いたら、動かなくなってしまいました。
使用しているPCはMacになりますが、何か原因があるのでしょうか？
＞ケリーさん
コメントありがとうございます。
当記事のフィルタリングスクリプトをご活用いただいているようで
うれしく思っております。
実際に実装されようとしているテストURL等、
画面を確認させていただかないと動かない原因の判断ができないのですが
コメントからスクリプトをコピペする際に
シングルクォーテーションや括弧が全角になっているので
全て半角にしていただくことを確認していただければと思います。
Mac、Windows関係なくどちらでも動作します。
ご確認ください。
よろしくお願いします。
BlackFlag様
早いご回答ありがとうございます！
すみませんこういったことは初心者で遅くなりました。
URL欄に記載させて頂きました、お忙しいかとは思いますが、よろしくお願い申し上げます！！
＞ケリーさん
URL確認させていただきました。
先にも述べさせていただいた通り
変更していただいた個所の「.cat」の前後に記載してある
シングルクォーテーションが全角になっていますので
半角で記載するようにしてください。
おそらくその部分を修正すれば動作すると思います。
ご確認よろしくお願いします。
BlackFlag様
本当にありがとうございました！！BlackFlag様のおっしゃる通りでした！
今なぜか画像と画像の隙間に謎のスペースが開く問題が発生しておりその原因を探っております。
またご質問させていただくかもしれませんがその際はお力になって頂けると幸いです。
この度は本当にありがとうございました。
＞ケリーさん
無事に動作したようで安心致しました。
画像間の余白はCSS側の「#filterlist ul li」で指定している
「margin: 5px;」の部分の可能性もありますので
ここの値を変更するなど試してみていただければと思います。
よろしくお願いします。