最後はスクリプトの組み込み
HTMLタグが準備できたら、スクリプトを組み込むだけです。2ページ目で説明したように、今回はWeb上にあるライブラリに直接リンクしています。Query UIのタブを使うには以下の2行を書き加えましょう。
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
そして、もう1つ。デフォルトのスタイルシートファイルもWeb上にあるものを直接読み込ませます。
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen">
最後に画像切り替えのアニメーション処理を設定します。「#photoSlide」の「photoSlide」が切り替える画像全体を囲む<div>タグのID名ですので、それを指定してあげましょう。画像を切り替える速度は「4000」の部分で設定します。単位は「ミリ秒」なので、4000なら4秒で画像が切り替わります。切り替えまでの時間があまり短いと、点滅するような感じになってしまいます。適度な時間にしておきましょう。
<script type="text/javascript"><!--
$("#photoSlide > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 4000, true);
// --></script>
以上で今回の課題は完了です。無事、お手本サイトのように、画像がスムーズに切り替わるようになりましたか？ （完成した作例）
4種類のタブと画像がフェードしながら切り替わるようになりました
今回は比較的、派手な処理に挑戦しましたが、いつもどおり手間はほとんどかかりませんでした。次回も引き続き、手軽にできる方法でJPhoto.netを改良していきましょう。どうぞお楽しみに。
（作例デザイン：wataru）
（作例写真：2000ピクセル以上のフリー写真素材集）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻
- 毎日コミュニケーションズ刊
- JavaScript 中級講座 ~Ajaxを学ぶ前の基礎知識
- 藤本 壱 著、技術評論社刊刊
- 実践!Ajaxフレームワーク jQuery
- 古籏一浩 著、毎日コミュニケーションズ刊
