ライブラリ配布先はこちら
[Slideshow]
http://www.electricprism.com/aeron/slideshow/
◆おっきな訂正！！！
今までスライドショー用の<div>タグ内に全ての写真についての
<img>タグを書いていたのですが、
あれは、不要でした・・・。
スライドショーが始まる前の最初の画像だけを書いておけば、
他の画像についてはScriptタグのほうに書くだけで、表示されることが判明。
（じっくり英語のマニュアルを読めばわかったことなのだが・・・。）
正しくはこれだけでよかったのです。ますます簡単です。
<div id='my_slideshow' class='slideshow'>
<img src='./images/1.jpg' alt='1'/>
</div>
・・・・ということで、前回まで書いていたコードは全て修正しました。
今回はnavigationプロパティを利用して、サムネイル表示を行う方法を試します。
◆サムネイルによるナビゲーションの表示
＜事前準備＞
サムネイル用の画像を準備します。
画像名を [元画像名]t.xxx というように変更すればサムネイルとして認識されます。
サイズは縮小して、画像をスリムにしておいたほうがよいと思います。
実際にサムネイルとして表示するサイズは、CSS側で決定します。
＜HTMLとScript＞
navigation:’thumbnails’ を追加すればサムネイル画像を表示してくれます。
＜CSS＞
サムネイル画像を表示するためにはCSSの設定が必要です。
サンプルとして載っていたCSSを解析してみました。
後はそれぞれ自分の気に入るように、コードに手を加えればよいと思います。
※CSSの設定はHTMLファイル上に直接記述するか、CSSファイルをインポートしておきます。
div.slideshow ul {
background: #FFF;
/* サムネイルの表示位置 */
margin-left:0px;
margin-top:10px;
/* ボックスからはみ出た部分は表示されない */
overflow: hidden;
padding: 5px 0;
}
div.slideshow ul a {
/* サムネイル画像の表示開始位置 */
background-position: 50% 50%;
/* サムネイルサイズ決定 */
height: 25px;
width: 30px;
/* 透明化処理*/
opacity: 0.5;
/* 透明化処理（IE）*/
filter: alpha(style=0,opacity=50);
cursor: pointer;
display: block;
margin-right: 5px;
}
div.slideshow ul a.active,
div.slideshow ul a:hover {
/* 透明化処理（IEではきかない）*/
opacity: 1;
/* 透明化処理（IE）*/
filter: alpha(style=0,opacity=100);
}
div.slideshow ul li {
/* サムネイルを横並びにする*/
float: left;
list-style: none;
}
サムネイルのサイズはul内のaブロックのサイズを指定することで決定します。
その際に background-position を「中心から(50% 50%)」と設定することで、
元画像のサイズに関係なくうまく表示されます。
opacityのいう画像を透明化する処理を付け加えています。
現在スライドショーに表示されている写真のサムネイルは「a.active」
マウスカーソルがあたっているサムネイルが「a:hover」となり
両者の場合以外は画像が透明化されるようになっています。
（サンプルソースから抜粋）
ただ、このプロパティはIEではきかないので、IE用にfilter: alphaプロパティを追加しました。
filter: alpha(style=0,opacity=50);
サンプルソースでは position:absolute 指定だったのですが、
この表記だと他のレイアウトに影響が出てしまうので
普通にmargin指定で表示位置を調整しています。
スライドショーの画像サイズと、写真枚数と、サムネイルのサイズとを
CSSでうまく調整する必要があります。
この微妙な調整が意外に時間がかかってしまうのですが、
少しずつ変更しながら、納得のいく形になるようにやるしかありません。
今回はサムネイル表示を行いたいので写真を5枚にしました。猫。うちの、猫。
◆再びはまりました・・・・
今回CSSに日本語のコメントをつけていたのですが、ローカル環境で確認する際に
CSSのファイルの文字コードをShift_JISにしてしまっていました。
HTMLの文字コードはUTF-8。
そのせいでコメントが化けて、IEでサムネイルがうまく表示されませんでした。
文字コードには気をつけないといけないですね。
次回はサムネイルとほぼ同じ表示方法なのですが、
オリジナル画像によるページ送りボタンをつける方法を試したいと思います。