コンテンツの幅に合わせて表示件数を決める
作例は、前回（関連記事）に引き続き、架空の書評サイト「東京ブックマニア」のトップページです。このページの下部にある、「当サイトで評価の高い本」の欄をカスタマイズして、ウィンドウ幅に応じて画像の表示件数を変更するようにしましょう。
作例サイト「東京ブックマニア」のトップページ。下にある「当サイトで評価の高い本」の表示件数がウィンドウ幅に合わせて変わるように改良していきます
実は、ウィンドウ幅に応じて表示される画像やテキストブロックの数を変えるのは、スタイルシートでも可能です。「それでは、がんばってスタイルシートで定義しましょう」……というのではあまりおもしろくありませんし、この連載の意味もありません。そこで今回はもう一工夫加えて、ウィンドウ幅の変化に応じてダイナミックに、書籍のサムネイル画像がフェードしながら追加、削除されるようにします。
使用するのは、おなじみの「jQuery」ライブラリです。前回の作例では「Prototype.js」ライブラリを使っていますので、最終的にはこれら2つを併用する形になります。
jQueryとPrototype.jsの衝突を回避する
前回の記事でも触れましたが、jQueryとPrototype.jsには同じ $()関数があるため、併用する場合には衝突を回避する手続きが必要です。Prototype.jsは $()関数が固定されていて他の名前に変更できませんが、jQueryでは任意の名前に変更できます。具体的には、以下のようにすることで、通常、jQueryで $("#temp") として書くところを $j("#temp") と指定できるようになります。
var $j = jQuery.noConflict(); // $()の衝突回避
この場合、$j() はjQueryの $() として、$() はPrototype.jsの $() として機能するようになります。以降のソースコードで $j() とある部分は、通常のjQueryで $() として動作することを念頭において見てください。
