「isotope」プラグインについて
filterプラグイン「isotope」
jQueryプラグインにポートフォリオサイト制作によく使用されるプラグインの一つに「isotope」があります。
isotopeプラグインは「filter」プラグインの一つで、並べられているコンテンツにカテゴリーを記述し、カテゴリー毎にまとめて表示するプラグインです。
ポートフォリオサイトでも「コーディング演習」「画像制作」などカテゴリー毎に表示したい場合などに有効です。
「isotope」練習画像
サンプルデータは ここからダウンロード
画像サイズは400×300で書き出す事
isotopeプラグインの使い方
isotope.pkgd.min.jsファイルのダウンロード
Download isotope.pkgd.min.jsというボタンがあるのでそれをクリックすると
minファイルのコードが確認できます。
それをコピーして、isotope.jsなどとしてファイルを作成し、プロジェクトのフォルダに配置します。
imageLoadedプラグインのダウンロード
isotopeで画像を使用すると画像がダウンロードされる前にプラグインが実行されてしまい、画像が重なったりしてしてしまいます。
このimageLoadedプラグインは全ての画像ダウンロードが完了するまで、他のプラグインを止めておくプラグインです。
公式ページからプラグインをダウンロード
HTML
<ul class="category-btn">
<li><a href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".drink">drink</a></li>
<li><a href="#" data-filter=".food">food</a></li>
<li><a href="#" data-filter=".fruits">fruits</a></li>
<li><a href="#" data-filter=".sweets">sweets</a></li>
</ul>
<main class="main">
<section class="menu">
<ul class="menu-list">
<li class="menu-items drink"><a href="#"><img src="img/drink01.jpg" alt=""></a></li>
<li class="menu-items food"><a href="#"><img src="img/food01.jpg" alt=""></a></li>
<li class="menu-items fruits"><a href="#"><img src="img/fruits01.jpg" alt=""></a></li>
<li class="menu-items sweets"><a href="#"><img src="img/sweets01.jpg" alt=""></a></li>
</ul>
</section>
</main>
クラス名はjsで指定すればいいので、なんでもかまいません。
上の場合だと、category-btnというのが、ボタンのコンテナにあたります。
そのボタンには、data-filterという属性を付与して、そのプロパティにクラス名を書きます。すべての場合は、アスタリスク(*)を書きます。
注意点としては、data-filter属性の値は、クラスを表すピリオド(.)を忘れずに記載しましょう。
$(function(){
var $grid = $('.menu-list').isotope({
// options
itemSelector: '.menu-items',
//layoutMode: 'fitRows'
});
// filter items on button click
$('nav a').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
return false;
});
});
フィルターの対象となるアイテムの親要素となるクラス名を指定し、それにisotope({})をつなげます。
itemSelectorに指定するクラスが、フィルターされるアイテムになります。
カテゴリーボタンがクリックされたら、data-filter属性の値として指定されているものと一致するものでフィルターできます。
