Tips 6 | Webページで写真のスライドショーを見せたい | JavaScript |
>> | point 5KB程度のJavaScriptファイルなので軽快 | ||
>> | point 写真と説明文をシンプルにマークアップ可能 |
「leigeber web development blog」で発表されているシンプルなスライドショー(www.scriptiny.com/2008/12/javascript-slideshow/)を実装してみよう。
[Click here to download the source.]をクリックしてダウンロードしたファイルを解凍し、「compressed.js」(JavaScript本体)、「style.css」、「images」(ナビゲーション用画像)を使用。次に写真素材を準備する。一枚につき、それぞれ大きな写真とサムネールを用意しよう。サンプルでは、大きな写真の横位置が500×334ピクセル、縦位置が横幅成り行き×高さ334ピクセルとしてそろえた。サムネールは、高さ75ピクセルで横幅は成り行きとし、大きな写真は「photos」ディレクトリ、サムネールは「thumbnails」ディレクトリに格納する【1】。
【1】このようなディレクトリ構成で、必要なファイルや画像を準備する
「style.css」をHTMLファイルに読み込み【2】、写真と説明文を一定のフォーマットでマークアップする【3】。<h3>が写真の見出し、<span>の中身が大きな写真までのパス、<p>が説明文、<img>がサムネール画像になる。次に、写真を表示する入れ物となる<div>とJavaScriptの設定を記述する【4】。サムネールがアクティブな場合のborder色は、「slideshow.active="#xxxxxx";」の部分で指定することになる。背景色や線の太さなどは、「style.css」内の記述で調整する。
【2】head要素内の記述
【3】スライドショーで使う写真と説明文のマークアップ
【4】写真を呼び出して動作させる部分の記述
【5】完成したスライドショー
[Click here to download the source.]をクリックしてダウンロードしたファイルを解凍し、「compressed.js」(JavaScript本体)、「style.css」、「images」(ナビゲーション用画像)を使用。次に写真素材を準備する。一枚につき、それぞれ大きな写真とサムネールを用意しよう。サンプルでは、大きな写真の横位置が500×334ピクセル、縦位置が横幅成り行き×高さ334ピクセルとしてそろえた。サムネールは、高さ75ピクセルで横幅は成り行きとし、大きな写真は「photos」ディレクトリ、サムネールは「thumbnails」ディレクトリに格納する【1】。
【1】このようなディレクトリ構成で、必要なファイルや画像を準備する
「style.css」をHTMLファイルに読み込み【2】、写真と説明文を一定のフォーマットでマークアップする【3】。<h3>が写真の見出し、<span>の中身が大きな写真までのパス、<p>が説明文、<img>がサムネール画像になる。次に、写真を表示する入れ物となる<div>とJavaScriptの設定を記述する【4】。サムネールがアクティブな場合のborder色は、「slideshow.active="#xxxxxx";」の部分で指定することになる。背景色や線の太さなどは、「style.css」内の記述で調整する。
【2】head要素内の記述
【3】スライドショーで使う写真と説明文のマークアップ
【4】写真を呼び出して動作させる部分の記述
【5】完成したスライドショー