エンジニアブログ

エンジニアブログ

jQueryのlightBoxプラグインの使い方

174436_100002191918053_3698151_n.jpg 井内 2012年05月17日

「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コーダーに見てもらったところ、「別のプラグインでも調べてほしい」とのコメントを頂きましたので、近いうちにまた投稿しようと思ってます。

本記事が皆様のお役に立ちましたら幸いです。