最後の仕上げ、スクリプトの組み込み
最後に、完成したスクリプトをHTMLに組み込みます。作成したスクリプト部分は別のファイル（「imagescale.js」ファイル）にしておき、<script>タグを使って読み込ませます。こうしておけば再利用も簡単です。読み込ませる順番は、最初にjQueryライブラリ、次に今回作成した「imagescale.js」です。
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/imagescale.js"></script>
ちなみに、作例では、「jQuery 1.3.1」を使っていますが、特にプラグインや特別なメソッドは使っていないので、古い1.2.xのバージョンでも問題なく動作します。他のプラグインと組み合わせて使う場合でも大丈夫です。
これで今回のお題は完成しました。以下に、実際に動く作例サイトを公開しています。チェックしてみてください。
完成した作例。画像をクリックするとその画像が滑らかに拡大されます。その後、詳細情報のテキストがフェードインしてきます。再度クリックすると、元の状態に戻ります
今回の29分でできる技はいかがでしたか？ 次回も優れたお手本サイトをもとに、「東京食べ歩きガイド」をブラッシュアップしていく予定です。それでは、また来週。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
