What's this?
- 18th Mar 2009
Lightbox JS は画像をクールに見せる便利なスクリプトです。
ただ、ウィンドウサイズよりも大きな画像を表示したとき、その画像がはみ出してしまいます。そこでスクリプトを作成してみました (基本動作は Lightbox JS をベースにしていますが、スクリプトそのものは完全オリジナルです)。
Lightbox JS は画像をクールに見せる便利なスクリプトです。
ただ、ウィンドウサイズよりも大きな画像を表示したとき、その画像がはみ出してしまいます。そこでスクリプトを作成してみました (基本動作は Lightbox JS をベースにしていますが、スクリプトそのものは完全オリジナルです)。
設置方法は Lightbox JS とほとんど同じです。
<script type="text/javascript" src="lightbox_plus.js"></script>
rel="lightbox"
属性を追記します。ver 20090707 より spica.js が不要になりました。lightbox_plus.js に全ての内容が記述されています。
"lightbox_plus.js"の末尾に
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
blankimg:'blank.gif',
previmg:'prev.gif',
nextimg:'next.gif',
closeimg:'close.gif',
effectimg:'zzoop.gif',
effectpos:{x:-20,y:-20},
effectclass:'effectable',
resizable:true
animation:true
});
});
のように Lightbox Plus で利用されている画像を指定している部分があります。
画像を変更したり、画像を設置するディレクトリを変更した場合はここで画像の url を指定してください。
デフォルトでは相対パスで指定され、"lightbox_plus.js" とそれを読み込む html ファイルと画像が全て同じディレクトリに置かれることが前提となっています。上記画像設定は絶対パスで指定した方が無難でしょう。
effectimg で効果画像の url、effectpos で効果画像の表示位置、effectclass で効果画像が適用されるクラスを指定します。
effectclass は効果画像を適用するクラスを指定します。もし無記名の場合、全ての lightbox に効果画像が表示されます。指定された場合、同一のクラスにのみ効果画像が適用されます。例えば、 "effectclass:'effectable'
" のように指定した場合、
<a href="[...image...]" rel="lightbox" class="effectable">****</a>
のように記述されたリンクに効果画像が適用されるようになります。
マウスホイールによる画像の拡大縮小を off にしたい場合は、resizable を false に設定してください。