ローカルでスライドショーを作成する
ここでは、おさらいの意味も兼ねて、Windowsのローカル環境を前提にデジカメなどで撮った風景写真を元に簡単なスライドショーを作ってみることにします。完成イメージは、写真をみながら、本人の感想が流れてゆく旅行日記風のスライドショーです。ソースコードはサンプル4を使用してみます。
まず、デスクトップなど任意の場所に適当なフォルダを作成し、その中にサンプル04のソースコードを貼り付けたhtmlファイル、jsフォルダ(effect.js/prototype.js/glider.js)、cssフォルダ(glider.css)、photoフォルダを配置します。photoフォルダにはjpgで001.jpg、002.jpg...という具合に必要な数だけスライドショーで使う写真を保存しておきます。 ここで使用する松本城の画像サンプルはこちらにあります。
htmlの修正
サンプル4のコードでは文字コードがUTF-8になっています。これはサーバサイドやLinux環境を考えた文字コードですので、これをWindows環境で動作するようshift-JISに変更します。
<head>タグのあとの以下の部分を
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
の部分を
<head>
<meta http-equiv="content-type" content="text/html;charset=shift-JIS">
に変えておきます。
glider.cssの修正
サンプルでは、画像以外にテキストコンテンツを入れるには少し枠が小さい感じがします。こういった場合にはcssフォルダに入れてあるglider.cssをテキストエディタで開いて、変更してやると良いでしょう。ここでは、glider.cssにあるheight(2カ所)をwidthと同じ635pxに変更してみました。こうすると、たくさん文章を入れたりできるようになります。
div.scroller {
/* modify width and height of scrolling section if necessary */
width: 635px;
height: 635px;
overflow: hidden;
border:1px solid #cccccc;
}
div.scroller div.section {
/* modify width and height of each section as needed (should match the size of the scroller window) */
width:635px;
height:635px;
overflow:hidden;
float:left;
padding:1em;
}
あとは、コンテンツを作成していくだけです。今回は写真が5枚という前提でコンテンツを作成してみます。変更が必要なのは以下の部分で5ページに対応するように変更します
<div id="glider1">
<div class="controls">
<a href="#page01">ページ 1</a> |
<a href="#page02">ページ 2</a> |
</div>
を
<div id="glider1">
<div class="controls">
<a href="#page01">ページ 1</a> |
<a href="#page02">ページ 2</a> |
<a href="#page03">ページ 3</a> |
<a href="#page04">ページ 4</a> |
<a href="#page05">ページ 5</a> |
</div>
に変更します。
次に新たに増えたページ分として以下の部分を追加します。<div class="section"から</div>までの間が1ページ分のひとつの区切りですので、それを考えればカスタマイズしやすくなります。以下の部分を
<div class="content">
<div class="section" id="page01">
■ページ 1<br>
<p>最初のページです</p>
</div>
<div class="section" id="page02">
■ページ 2<br>
<p>二番目のページです<br>
<img src="photo/001.jpg" width="384" height="216">
</p>
</div>
</div>
を下記のように変更します。
<div class="content">
<div class="section" id="page01">
■ページ 1<br>
<p>最初のページです</p>
</div>
<div class="section" id="page02">
■ページ 2<br>
<p>二番目のページです<br>
<img src="photo/002.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page03">
■ページ 3<br>
<p>三番目のページです<br>
<img src="photo/003.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page04">
■ページ 4<br>
<p>四番目のページです<br>
<img src="photo/004.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page05">
■ページ 5<br>
<p>五番目のページです<br>
<img src="photo/005.jpg" width="384" height="216">
</p>
</div>
あとは写真の解説などをテキストで<div>タグの間に書きます。ここでは以下のように変更してみました。
<div class="content">
<div class="section" id="page01">
■ページ 1<br>
<p><h2>風雲松本城!</h2><br>
長野県は松本市にある城。別名烏城(からすじょう)ともよばれる。5重6階の天守閣をもつこの城は、戦国時代の甲斐源氏名門、小笠原氏が砦を築き、甲斐武田がその後支配、その後は徳川家が支配したとされる。外壁に見られる下見板張も特徴。</p>
<p><img src="photo/001.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page02">
■ページ 2<br>
<p>松本城のしゃちほこをズームアップした写真です。背景のすがすがしい空に凛として立つしゃちほこは、なかなか迫力のあるものです。<br><br>
<img src="photo/002.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page03">
■ページ 3<br>
<p>松本城内の門。小笠原時代か武田時代か徳川時代かそれ以降かはわかりませんが、なかなか雰囲気を出しています。<br> <img src="photo/003.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page04">
■ページ 4<br>
<p>城内からの撮影。映画などでもよく城内からの映像が見られると思いますが、さすがに趣があります。格子から差し込む光が、印象的な一枚となりました。<br>
<img src="photo/004.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page05">
■ページ 5<br>
<p>天主から見下ろした様子を撮った写真。左がお掘りで、右が庭になっています。<br> <img src="photo/005.jpg" width="384" height="216">
</p>
</div>
</div>
