Lightbox Plus

What's this?

  1. サンプル
  2. 追加機能
  3. 設置方法
  4. カスタマイズ
  5. FAQ
  6. ダウンロード

Lightbox JS は画像をクールに見せる便利なスクリプトです。

ただ、ウィンドウサイズよりも大きな画像を表示したとき、その画像がはみ出してしまいます。そこでスクリプトを作成してみました (基本動作は Lightbox JS をベースにしていますが、スクリプトそのものは完全オリジナルです)。

サンプル

  • sample 1
  • sample 2
  • sample 3
    • sample 4
    • sample 5
    • sample 6

追加機能

  • ウィンドウサイズよりも大きな画像を表示した際に、画像の拡大ができます。
  • 表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。
  • 効果画像を貼付けることができます。
  • マウスホイールで画像の拡大率を変更することができます。
  • 拡大した画像はマウスでドラッグできます。

設置方法

設置方法は Lightbox JS とほとんど同じです。

  1. html ヘッダに lightbox_plus.js を追記します。
    <script type="text/javascript" src="lightbox_plus.js"></script>
  2. Lightbox を有効にする全てのリンクに 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 に設定してください。

FAQ

ローディング用のアニメーション GIF が表示されません
スクリプト末尾のパス指定が正しく設定されていない可能性があります。カスタマイズを参考にパスを設定し直してみて下さい。
ローディング用画像が右端に表示されてしまう
lightbox_plus.js を最新版に差し替えて下さい。
画像が表示された後も、ローディング画像が表示されている
lightbox_plus.js を最新版に差し替えて下さい。

ダウンロード

アーカイブサイズ3.6MB (zip format)
バージョン20140824

サンプルのダウンロード

お問い合わせ

当スクリプトに関するお問い合わせは下記アドレスによろしくお願いします。

takuya.otani@gmail.com

お返事に時間をいただく場合がございます。ご了承ください。

更新履歴

2014/08/24
次の画像ボタンがずれて表示されるバグ・画像が表示されないバグを修正
2010/08/23
キャプションが画面外に表示されてしまう場合があるバグを修正
2010/08/21
次・前の画像リンクがある条件下で見えなくなってしまうバグを修正
2009/07/29
正しく Lightbox が閉じないバグを修正
2009/07/09
ローディングイメージが正しく表示されないバグを修正
2009/07/07
アニメーション効果を追加
2009/03/18
次・前の画像リンクが表示されないバグを修正
2007/04/04
サンプルファイルを追加
2006/10/27
Netscape 7 で動作しないバグを修正
2006/10/26
いくつかのバグを修正
2006/10/11
イメージセットに対応
2006/09/20
全体図を追加
2006/09/18
マウスホイール・画像ドラッグ機能を追加
2006/01/28
効果画像機能を追加
2006/01/22
Lightbox JOJO
2006/01/20
キャプション・閉じるボタンの追加
2006/01/15
公開
Copyright © 2006 SerendipityNZ Ltd. All rights reserved.