スクリプトはこちら
[Slideshow]
http://www.electricprism.com/aeron/slideshow/
type:pushとtype:wipeの場合に、更に細かい効果を指定できるオプションがありました。
JavaScriptのframeworkであるmootools.jsに
含まれているFx. Transitions.jsライブラリを使用しています。
Fx. Transitions.jsライブラリは様々なエフェクトを指定できるようです。
mootools.jsのドキュメントを少し見たのですが、とにかく豊富です。
いろんなことができそう。
いつか使いこなせるようになりたいと思います。
[mootools document]
http://docs.mootools.net/
◆[transition:]
＜Script＞
scriptの引数に以下を追加します。
transition: Fx.Transitions.[エフェクト名]
サンプルを見た限りでも
1.linear/
2.quadIn/quadOut/quadInOut/
3.cubicIn/cubicOut/cubicInOut/
4.quartIn/quartOut/quartInOut/quintIn/quintOut/quintInOut/
5.sineIn/sineOut/sineInOut/
6.expoIn/expoOut/expoInOut/
7.circIn/circOut/circInOut/
8.elasticIn/elasticOut/elasticInOut/
9.backIn/backOut/backInOut/
10.bounceIn/bounceOut/bounceInOut
これだけの種類がありました。
1.はわりとノーマルな表示です。
2.から7.まではスライドされる速さが一定ではなく、どこかに「タメ」があったりします。
8.はじらした感じの表示です。
9.は勢い余ってはみ出します。
10.はスライドするときにバウンドします。（前回使用した効果は10.bounceOutです。）
それぞれがどんな動きをするのかは自分で確かめてみるのが一番です。
こちらで[Robert Penner easing transitions]を選択し、
コンボボックスで効果を選択して確かめてみてください。
◆[captions:]
最後の（たぶん）プロパティは画像ごとにキャプションを指定するものです。
スライドと一緒にキャプションも切り替わります。
＜Script＞
scriptの引数は以下のようになります。
captions: [表示したいキャプションの配列]
キャプションの順序は画像の表示順序に対応している必要があります。
＜生成されるHTML＞
キャプションの表示領域は画像表示領域の下の<p>タグで囲まれた部分となります。
<div id="my_slideshow" class="slideshow">
<div>
<img src="images/1.jpg" width="400" height="300" />
</div>
<p>ここにキャプションが表示されます</p>
</div>
よって、CSSは次のように指定します。
＜キャプション表示用CSS＞
div.slideshow p {
/*CSSを記述する*/
}
このキャプションのいいところは、HTMLのタグが使用できるところ。
たとえば、写真単位で<a>タグによってリンクをつけたり、
<b>タグで文字の強調表示が行えたりするのです。
[transition:]と[captions:]を使ったスライドショーサンプルです。
今回はフリーの写真素材集からステキな写真を探してきました。
やっぱり写真もよければ効果もさらによく見えます・・・
[ゆんフリー写真素材集]
http://www.yunphoto.net/jp/photo.html
＜HTML＞
<div id='trancap' class='slideshow_trancap'>
<mg src='./images/s1.jpg' height='120' width='180' />
</div>
＜Script＞
MyShow = new Slideshow('trancap', {hu: './images/' , captions:['Leaves of trees' , 'Flower' , 'Clock' , 'Trees' , 'Photo by <a href=\"http://www.yunphoto.net/jp/photo.html\">yunphoto.net</a>' ] , type:'push', transition: Fx.Transitions.backInOut, duration:[1000,2000], images: ['s1.jpg','s2.jpg','s3.jpg','s4.jpg','s5.jpg'] , height:120 , width:180 });
＜CSS＞
div.slideshow_trancap p {
/* キャプションの文字の大きさや色を決める*/
font-size:14px;
margin-left: 5px;
padding: 1px 2px;
color:#FF0084;
}
※クリックするとスライドショーが開始します
※<a>タグを使用したキャプションをブログで表示しようとする場合、
記事に直接スクリプトを記述すると、ブログ側の処理で自動的にサニタイズされ
スクリプトがうまく動かない場合があるようです（私はそれではまりました。）
ブログに直接記述してうまくいかない場合は、スクリプトファイルを用意し、
画像のOnClickイベントでスクリプトを動かすようにするなどして対応すれば
うまく表示できるようになります。
次回は画像取得APIとスライドショーを組み合わせてみる。。。予定。