Lightbox JSにエフェクトをかけてみる

Lightbox JSscript.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たのしー

Filed under: 技術・開発

About the Author

Posted by

個人の可能性を解放するプラットフォームと居場所づくり。CAMPFIRE代表、BASE共同創業、ペパボ創業、NOW代表、リバ邸創設、ブクログや渋谷オンザコーナー、しぶや花魁をつくったり。現代アート蒐集も。長野の森に住んでいます。

2 Comments

Comments are closed.