画像をカテゴリ別に表示させる
画像をカテゴリ別に表示させる
画像にカテゴリを付与し、ブラウザ上で一覧表示からカテゴリ別表示に切り替える。
framework.js
紹介サイト一つのHTMLでカテゴリ別に表示する内容を変えるjQueryのプラグイン | CSS Lecture
今回使用するのは「framework」というjQueryプラグインだ。大まかに言うと、liにclassを指定することでカテゴリを付与し、ブラウザ上でカテゴリ別表示が実現されるものだ。コンテンツがある程度の量になる場合には特に有効となる。
framework.jsの使い方
.jsのソースで特に変更する箇所はない。サムネイル画像を元画像とは別で準備する。今回は200px*133pxでサムネイルを作成し、元画像は600px*400pxとした。カテゴリ名を羅列するulにid="filter"を定義し、さらにliのaにrel=""でカテゴリ名を定義する。このとき、半角小文字のみ使用すること。
ulをもう一つ用意し、こちらは画像を並べる。liのclass=""で先ほどrel=""で定義したカテゴリ名を付与することができる。複数のカテゴリに属する場合は、その分class=""の定義を増やせばよい。
fancybox.jp
fancyBox - Fancy jQuery Lightbox Alternative
もう一つ「fancybox」というjQueryも使用する。こちらはモーダルウィンドウの一種で、多機能さが売りだ。前回学んだjQueryGoogleImgSearchUIとの差異としては、テキストエリアは持たない一方、画像以外のメディアの扱いに関して優れている。flas(.swf)やyoutubeの埋め込み、iFrameを用いてポップアップウィンドウ上でサイトを表示させるといったことも可能だ。更に、その表示させたサイト上でjQueryを動かすといったことも出来る。
fancybox.jsの使い方
こちらは表示させるコンテンツにより使い方が変わってくる。fancyBox - Fancy jQuery Lightbox Alternativeのサイトを熟読する必要があるが、概ね以下のとおりである。
- 画像を表示させたい場合、ページ内の「single images」タブを参照する。htmlのタブにあるとおり、画像側liのaにid="single_1"を記述。さらにjava scriptのタブにあるコードをエンベットする。
- 画像をギャラリーにする場合は、「image gallery」タブを参照する。htmlタブにあるとおり、画像側liのaにclass="fancybox" rel="gallery1"を記述。さらにjava scriptタブにあるコードをエンベットする。
- 画像以外の場合も同様だが、画像側liのaに記述する内容が異なるので、何を使うのか理解した上でclass等を書き換える。jsは共通で、heightやwidhtなどを調整できる。
