jQueryのlightBoxプラグインの使い方
「jQueryプラグインは便利だけど、カスタマイズして使おうとすると情報が少なくて困る」
社内のHTMLコーダーから聞いたお話です。
確かに細かな設定をしようとすると、英語の情報をみないとダメな場合が多いですね。
最近lightBoxプラグインを触る機会があったので、あまりウェブ上には見当たらない細かなオプション設定を中心にまとめてみました。
各オプションにつきまして、実際に動作するサンプルも用意しましたのであわせてください。
目次
lightBoxプラグイン
公式サイト
使い方
使い方につきましては下記ページに詳しく書かれておりますのでご覧下さい。
こんな感じでオプションを設定して使用します。
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ overlayOpacity: 0.2, fixedNavigation:true }); }); //--> </script>
デフォルト設定
オプションを1つも設定せず動作させてみました。設定してないオプションには初期値が適用されます。
初期値は下記ページにまとまってますのでご覧下さい。
サンプル:オプション設定なし |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox(); }); //--> </script>
各オプションの説明
overlayBgColorオプション
オーバーレイの色を設定できます。初期値は黒(#000)です。
CSSのbackground-colorプロパティを設定しているので、省略表記や色名表記も使用できます。
記述の際はシングルorダブルクォーテーションで値を括ってください。(「'」「"」)
省略表記、色名表記につきましては下記ページをご覧下さい。
サンプル:オーバーレイが薄い赤色 |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ overlayBgColor: '#ff8888' }); }); //--> </script>
overlayOpacityオプション
オーバーレイの不透明度を設定できます。0〜1の値を設定できて、初期値は0.8です。
CSSのopacityプロパティを設定しています。
1は不透明度最大で、overlayBgColorで設定した色そのままになります。
0は不透明度最小で、完全に透明になります。
サンプル:オーバーレイの色が薄い(初期値の約3倍) |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ overlayOpacity: 0.26 }); }); //--> </script>
fixedNavigationオプション
画像を移動する「prev」「next」ボタンの表示スタイルを設定できます。
true / falseいずれかの値を設定可能です。
false : 画像にマウスカーソルののせた時に表示する。(初期値です)
true : 常に表示する。
サンプル:prev,nextボタンを常に表示する |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ fixedNavigation: true }); }); //--> </script>
ボタン画像を変更するオプション
下記オプションで「prev」「next」「close」ボタンの画像と、画像読み込み中にくるくる回る画像を設定します。
オプション名 | デフォルト画像 |
---|---|
imageLoading | |
imageBtnPrev | |
imageBtnNext | |
imageBtnClose |
サンプル:ボタン画像の場所が入れ替わっている |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ imageLoading: 'images/lightbox-btn-close.gif', imageBtnPrev: 'images/lightbox-ico-loading.gif', imageBtnNext: 'images/lightbox-btn-prev.gif', imageBtnClose: 'images/lightbox-btn-next.gif' }); }); //--> </script>
containerBorderSizeオプション
画像の周りの枠のサイズを設定できます。初期値は10です。
。。。のはずですが、うまく動作しませんでした。横枠、下枠の幅のみ変更されてしまいます。
サンプル:白枠の太さが初期値の3倍 |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ containerBorderSize: 30 }); }); //--> </script>
containerResizeSpeedオプション
画像をクリックしてから表示されるまでの時間を、ミリ秒単位で設定できます。
初期値は400msです。値を大きくするほどゆっくりになります。
この動作は、jQueryのanimate関数を使っています。
サンプル:初期値の約3倍の速度で表示 |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ containerResizeSpeed: 200 }); }); //--> </script>
txtImage, txtOfオプション
画像左下に表示されている「Image 1 of 4」のテキスト部分を変更できます。
「txtImage」オプションで「Image」の部分のテキストが変更できます。
「txtOf」オプションで「of」の部分のテキストが変更できます。
サンプル:「画像 1 / 4」という表記に変更 |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ txtImage: '画像', txtOf : '/' }); }); //--> </script>
keyToClose, keyToPrev, keyToNextオプション
「prev」「next」「close」のショートカットキーを変更できます。
初期値はそれぞれの頭文字(p,n,c)になっています。
また「close」については、ここで設定したキー以外に「x」とエスケープキーがショートカットになっています。
(私の環境ではエスケープキーは動作しないブラウザがありました)
サンプル:prev,next,closeのショートカットキーをそれぞれv,t,eに変更 |
---|
<script type="text/javascript"> <!-- $(function() { $('gallery a').lightBox({ keyToPrev: 'v', keyToNext: 't', keyToClose: 'e' }); }); //--> </script>
最後に
最後まで読んで頂きありがとうございます。
公開前に社内のHTMLコーダーに見てもらったところ、「別のプラグインでも調べてほしい」とのコメントを頂きましたので、近いうちにまた投稿しようと思ってます。
本記事が皆様のお役に立ちましたら幸いです。