JavaScript-Slideshow を使う。(3)

前回で、表示はできるようになったので、
各プロパティを詳しく解析していきたいと思います。

ライブラリ配布サイトはこちら。
[Slideshow]
http://www.electricprism.com/aeron/slideshow/
◆表示サイズを指定するプロパティ
[height:xxx]
高さを指定
[width:xxx]
幅を指定

ピクセル数(単位不要)のみの指定となります。
数値はそのまま記述しても""で囲んでも”で囲んでもOKでした。
%での指定も試みましたが、構文エラーとなりできないようです。

◆エフェクトを設定するプロパティ
[type:xxx]
スライドショーのタイプを指定。
「fade」「pan」「zoom」「combo」「push」「wipe」の6タイプから選択します。
デフォルト(何も指定しない場合)は「fade」です。

それぞれがどのような動きをするのか検証してみます。
今回サンプルに利用するのはこの写真。季節感まぜこぜです。
a.jpgb.jpgc.jpg

◇type:’fade’
デフォルト。前の写真が消えていきながら次の写真が現れます。

◇type:’pan’
写真のフォーカス位置(中心点)が動いていきます。

◇type:’zoom’
写真がズームアップされた状態から始まり、遠ざかるように表示されます。

◇type:’combo’
pan+zoomです。フォーカス地点が動きつつ、zoomが変化します。

※panとzoomとcomboでは写真が切り替わるときにはfade効果がはたらきます。

◇type:’push’
右から左に写真が押し出されます。

◇type:’wipe’
紙芝居形式です。前の写真の上に次の写真がスライドされます。
pushは写真の切り替え時に前の写真も動きますが、wipeは固定されたままです。

◆オプション
[pan:xxx]
[zoom:xxx]
zoomやpanの度合いを決定するオプション。
type:’zoom’ならzoom、type:’pan’ならpan、type:’combo’なら両方指定することができます。
0から100までの数値(単位は%になる)か”rand”というキーワードを指定します。
“rand”を指定すると、スライドごとにランダムな度合いでzoom、focusします。
サンプルでは type:’combo’ 、zoom:10 、pan:100 を指定。

◆その他効果
[ duration:[xxxx,xxxx] ]
ページの切り替え時間を指定できます。
duration:[ 動作時間 , 停止時間 ](単位はミリ秒)の形式で指定します。
サンプルでは type:’push’ 、duration:[500,5000] としています。

ということで、いろいろなプロパティを使用したのがこちら。
ちなみに、引数の順序は特に決まりがないようです。
<div id='sample' class='slideshow'>
<img src='../images/a.jpg' height='120' width='180'/ >
</div>

<script type="text/javascript">
myShow = new Slideshow('sample', {hu: '../images/' , type:'combo' , zoom:'rand' , pan:'rand' , duration:[1000,2000] , images: ['a.jpg','b.jpg','c.jpg']});
</script>

◆はまりました・・・
サンプル用スライドショーをCSSのdisplay属性による表示・非表示で切り替えようとしたら
「引数が無効です」というJavaScriptエラーが・・・。
スライドショー表示をしたい<div>タグのすぐ下にscriptを書く場合、
<div>にstyle=’display:none’が設定されていると、
該当するidのオブジェクトがない(みえない)ため
エラーとなってしまうということが判明しました。

style=’display:none’による切り替えを行いたい場合は、
切り替えるタイミングで(onClickイベントとか)、
スライドショー表示のロジックを実行させる必要があるのですね。

というわけで今回のサンプルは、スライドショー表示のロジックが
リンクのonClick時に発生するようにしております。

次回はスライドショーのサムネイル表示に挑戦です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください