Lightbox JSとscript.aculo.usを組み合わせてみた。
左のサムネイルをクリックしてみてください。大きな画像がふわーっとフェードインで表示されます(IEのバージョンによっては動かないぽい)。
やり方はとても簡単。
scriptaculous.jsを読み込んだ上で、lightbox.jsのshowLightbox()とhideLightbox()の中にそれぞれ、
195行目付近に
objLightbox.style.display = ‘none’;
new Effect.Appear(objLightbox, {duration:0.6});
てのと
224行目付近に
objOverlay.style.display = ‘none’;
new Effect.Fade(objLightbox, {duration:0.6, afterFinish: function() {objLightbox.style.display = ‘none’;}});
てな感じのを適当に入れるだけ。速度を変えたいときはduration:をいじって。数値をあげれば遅くなる。
Appear/Fade以外の関数を使ってもいろいろと遊べそう。
一応ここにJSファイル置いときますね´・ω・`)
(画像パスなどはご自分のに置き換えてください)
あーscript.aculo.usたのしー
2 Comments