画像をカテゴライズして表示/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creating a Filterable Portfolio with jQuery</title>
<link href="stylesheets/screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/framework.js"></script>
</head>

<body>

<div id="container">

	<ul id="filter">
		<li class="current"><a href="#" rel="All">All</a></li>
		<li><a href="#" rel="ichigo">イチゴ</a></li>
		<li><a href="#" rel="mikan">ミカン</a></li>
		<li><a href="#" rel="budou">ブドウ</a></li>
		<li><a href="#" rel="pepper">ピーマン</a></li>
		<li><a href="#" rel="red">赤</a></li>
		<li><a href="#" rel="orange">オレンジ</a></li>
		<li><a href="#" rel="green">緑</a></li>
		<li><a href="#" rel="wa">わらわら</a></li>
	</ul>

	<ul id="portfolio">
		<li class="ichigo red"><a href="#"><img src="images/1.jpg" alt="" height="165" width="220" /></a></li>
		<li class="mikan orange"><a href="#"><img src="images/2.jpg" alt="" height="165" width="220" /></a></li>
		<li class="budou green"><a href="#"><img src="images/3.jpg" alt="" height="165" width="220" /></a></li>
		<li class="pepper red"><a href="#"><img src="images/4.jpg" alt="" height="165" width="220" /></a></li>
		<li class="pepper orange"><a href="#"><img src="images/5.jpg" alt="" height="165" width="220" /></a></li>
		<li class="pepper green"><a href="#"><img src="images/6.jpg" alt="" height="165" width="220" /></a></li>
		<li class="wa ichigo red"><a href="#"><img src="images/7.jpg" alt="" height="165" width="220" /></a></li>
		<li class="wa mikan orange"><a href="#"><img src="images/8.jpg" alt="" height="165" width="220" /></a></li>
		<li class="wa pepper"><a href="#"><img src="images/9.jpg" alt="" height="165" width="220" /></a></li>
	</ul>
</div>

</body>
</html>

	Creating a “Filterable” Portfolio with jQuery - Nettuts+

画像をカテゴライズしてポートフォリオのように表示します。
もちろん画像の下に、テキストリンク付けたり、画像ではなく、ただのコンテンツでもOKです。
jQueryを使用します。

セッティング

１．ダウンロード/セッティング

まずはサイトへ行き、スクリプトをダウンロードしてきます。
ダウンロードした圧縮ファイルを解凍したら、scriptフォルダとstylesheetsフォルダをアップしてください。
既にjsファイルを入れてるフォルダがあるならjsファイルはそこへ、cssは既に読み込んでるものに追加記述しても良いかもしれません。

２．<head>の設定

アップしたスクリプトを読み込ませます。

パスは置いた位置にあわせて調節してください。

３．HTMLマークアップ

主に、メニュー部分と表示部分に分かれます。順番はどちらが先でもOKです。

■メニュー部分

ulにIDでfillterと付けて、その中にある、<a>内の属性、relでカテゴリを分けています。
分けたいカテゴリの名前を上記のように英数字で書き込んでください。

ダウンロードしてきたスクリプトのままだと、<a>タグで囲まれたテキストでカテゴリを判別させていたので、ここは少しカスタマイズしてみました。
テキストで判断されると、メニューを画像で作れないし、日本語だと後で記述する表示部分で不細工になるので、カスタマイズした方が自由度高いかと思います。

■表示部分

表示部分にはIDでportfolioと付けてください。
<li>要素がカテゴライズされて、表示されるわけですが、
そのカテゴリ分けの方法は、メニュー部分で<a>のrelに入れた名前を、classに設定するだけでOKです。
カテゴリは重複してもかまいません。これで画像のみでなく、コンテンツでもカテゴライズして整理することができます。