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たのしー
社長のhbkrで初めてlightbox.jsを見て感動していた大学生です。
組み合わせるとこんな魅力的な見せ方もできるんですね。
早速、http://yamanoko.com/のトップに導入してみました☆
ajax関連だと、ZEROBASEさんの
http://zerobase.jp/blog/entry-275.htmlとか
http://zerobase.jp/blog/entry-268.html
も面白いですよー!
こんばんは。
私はこれを利用していますが、このエフェクトは対応可能でしょうか。
http://serennz.cool.ne.jp/sb/sp/lightbox/index_ja.html
使い方が分からないものでして….。