サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jquery.colorbox.jsの使い方まとめ

jquery.colorbox.jsの使い方まとめ

色々な機能のライトボックスを実装できるjQueryプラグイン「jquery.colorbox.js」の使い方をメモ。

使い方

jquery.colorbox.jsは下記からダウンロードできます。
Colorbox – a jQuery lightbox

HTML内に必要なファイルを読み込みます。

<link rel="stylesheet" href="colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

HTML

画像、埋め込みHTML、外部HTMLの3種類を試してみます。

<a href="../../img/01.jpg" class="lightbox">画像</a>
<a href="#content" class="lightbox2">埋め込みHTML</a>
<a href="content.html" class="lightbox3">外部HTML</a>

<div style="display:none">
	<div id="content">
		<p>埋め込みHTML</p>
	</div>
</div>

content.html

<div id="content">
	<p>外部HTML</p>
</div>

JavaScript

$(function() {
	$('.lightbox').colorbox();
	$('.lightbox2').colorbox({
		inline: true
	});
	$('.lightbox3').colorbox();
});

colorbox.jsのデモページ
ライトボックスのデザインはデフォルトでは5種類用意されています。
パターン2
パターン3
パターン4
パターン5
 

オプション

詳しくは、公式サイトのオプションやサンプルをご確認ください。
オプション設定のデモページ

transition ライトボックス表示の種類を指定。
‘elastic’か’fade’か’none’で初期値は’elastic’。
speed ライトボックス表示の速度を指定。
初期値は350。
href ライトボックスで表示する内容を指定。
初期値はfalse。
title ライトボックスで表示するタイトル指定。
初期値はfalse。
rel ライトボックスで表示する要素のグループ分けを指定。
初期値はfalse。
scalePhotos 値がtrueで他のオプションにmaxWidth、maxHeight、innerWidth、innerHeight、width、heightのどれかが指定されている場合、写真のサイズを合わせて表示する。
初期値はtrue。
scrolling ライトボックス内のコンテンツがライトボックスより大きい場合に、スクロールバーを出すかどうかを指定。
初期値はtrue。
opacity 背景の透明度を0~1の間で指定。
初期値は0.85。
open ライトボックスをページアクセス時に開くかどうか。
初期値はfalse。
returnFocus ライトボックスを閉じたときに、そのライトボックスを開くリンクにフォーカスを戻すかどうかを指定。
初期値はtrue。
trapFocus キーボードでのフォーカスの移動がライトボックス内ナビゲーションやコンテンツに制限するかどうか。
初期値はtrue。
fastIframe falseの場合、iframeのコンテンツが完全に読み込まれるまでローディング除去とonCompleteが遅延される。
初期値はtrue。
preloading 現在のライトボックス読み込み完了後に、同じグループの前と次のプリロードを行うかどうか。
初期値はtrue。
overlayClose 背景クリックでライトボックスを閉じるかどうかを指定。
初期値はtrue。
escKey Escキーを押してライトボックスを閉じるかどうかを指定。
初期値はtrue。
arrowKey 矢印キーの左右でグループ間の移動を行うかどうかを指定。
初期値はtrue。
loop グループ間の移動で最後から先頭に移動するかどうかを指定。
初期値はtrue。
data 初期値はfalse。
className ライトボックスと背景にclassを追加する。
初期値はfalse。
fadeOut ライトボックスを閉じるときのフェードアウトの速度を指定。
初期値は300。
closeButton 閉じるボタンを表示するかどうかを指定。
初期値はtrue。

Internationalization

current グループ全体の枚数と現在の位置の表示内容を指定。
初期値は”image {current} of {total}”。
previous previousボタンのHTML上のテキストを指定。
初期値は”previous”。
next nextボタンのHTML上のテキストを指定。
初期値は”next”。
close closeボタンのHTML上のテキストを指定。
初期値は”close”。
xhrError ajaxで取得した際にロードできなかった場合のエラーメッセージを指定。
初期値は”This content failed to load.”。
imgError 画像のロードに失敗した場合のエラーメッセージを指定。
初期値は”This image failed to load.”。

Content Type

iframe iframeで表示するかどうかを指定。
初期値はfalse。
inline 現在のページに埋め込まれている内容を表示する場合に指定。
初期値はfalse。
html HTMLタグまたは文字列を直接指定する場合に指定。
初期値はfalse。
photo 初期値はfalse。
ajax

Dimensions

width ライトボックスの幅を指定。
borderやbuttonも含まれる。
初期値はfalse。
height ライトボックスの高さを指定。
borderやbuttonも含まれる。
初期値はfalse。
innerWidth ライトボックスの幅を指定。
borderやbuttonは除外する。
初期値はfalse。
innerHeight ライトボックスの高さを指定。
borderやbuttonは除外する。
初期値はfalse。
initialWidth ライトボックス内の要素を読み込む前の初期の幅を指定。
初期値は300。
initialWidth ライトボックス内の要素を読み込む前の初期の高さを指定。
初期値は100。
maxWidth ライトボックス内の要素の最大幅を指定。
初期値はfalse。
maxHeight ライトボックス内の要素の最大高さを指定。
初期値はfalse。

Slideshow

slideshow スライドショー(グループ間での自動切り替え)を追加するかどうか設定。
初期値はfalse。
slideshowSpeed スライドショーで次を表示するまでの時間を設定。
初期値は2500。
slideshowAuto スライドショーが自動で開始するかどうかを設定。
初期値はtrue。
slideshowStart スライドショー開始ボタンのテキストを設定。
初期値は”start slideshow”。
slideshowStop スライドショー停止ボタンのテキストを設定。
初期値は”stop slideshow”。

Positioning

fixed ライトボックスを固定位置に表示するかどうかを指定。
初期値はfalse。
top fixedがtrueの時のtopからの位置を指定。
初期値はfalse。
bottom fixedがtrueの時のleftからの位置を指定。
初期値はfalse。
left fixedがtrueの時のrightからの位置を指定。
初期値はfalse。
right fixedがtrueの時のbotomからの位置を指定。
初期値はfalse。
reposition ウインドウサイズが変更されたときに、ボックス位置を変更するかどうかを指定。
初期値はtrue。

Retina Images

retinaImage trueの場合、写真を画面比率に合わせて縮小する。
初期値はfalse。
retinaUrl 高解像度のディスプレイの場合に、画像の差し替えを行うかどうかを指定。
初期値はfalse。
retinaSuffix retinaUrlがtrueで高解像度のディスプレイの場合に、ファイル名の末尾をどう変更するかを指定。
初期値は”@2x.$1″で、例えば’my-photo.jpg’が’my-photo@2x.jpg’のように変更される。

Callbacks

onOpen ライトボックスが開き始める前に実行。
初期値はfalse。
onLoad ライトボックスのコンテンツをロードする前に実行。
初期値はfalse。
onComplete コンテンツが表示された直後に実行。
初期値はfalse。
onCleanup ライトボックスを閉じる処理開始時に実行。
初期値はfalse。
onClosed ライトボックスが閉じられてから実行。
初期値はfalse。

Public Methods

$.colorbox() 要素に割り当てずにライトボックスを開く。
$.colorbox.next() グループ間の次へ移動する。
$.colorbox.prev() グループ間の前へ移動する。
$.colorbox.close() ライトボックスを閉じる。
$.colorbox.element() ライトボックスに関連するHTML要素を取得。
$.colorbox.resize([options]) オプションでwidthやinnerWidthなどを指定している場合にはそのサイズにリサイズする。
オプションがない場合は自動計算に基づいてリサイズする。
$.colorbox.remove() ライトボックスの要素をDOM上から削除する。

Event Hooks

cbox_open ライトボックスが開かれたときに実行する。
cbox_load ライトボックスのコンテンツをロード開始時に実行。
cbox_complete ライトボックスのコンテンツが表示された時に実行。
cbox_cleanup ライトボックスを閉じる処理開始時に実行。
cbox_closed ライトボックスが閉じられてから実行。

 

【参考サイト】

 

“jquery.colorbox.jsの使い方まとめ” への32件のフィードバック

  1. よしみ より:

    以前、グループ別に並び替える JQuery を教えていただいた よしみです。

    一点、奇妙なことが起こったのですが、確認すべき項目を教えてください
    奇妙なことは、edgeで、colorbox拡大表示後、写真外をクリックし、マウスを移動させると
    写真の表示位置でなく、最下段に移動してしまうのです。
    思いつく原因は何かありますか?
    ややこしい質問で申し訳ありません。

    • cly7796.net より:

      よしみさん
      実際の動作を見ていないので憶測でしか言えないですが、考えられそうなのは
      ① ライトボックスを閉じたときに 元のリンクにフォーカスを戻す機能があるので、そのあたりが影響している。
      ② JavaScriptで何らかのエラーが出ていて、意図しない挙動になっている。
      ③ 他のJavaScriptが影響している。
      などでしょうか。

    • よしみ より:

      ありがとうございます
      特定のPCのみが動作が異常ですので、プログラムは異状ないと思います。
      PCに起因する原因は何が考えられますか?

      • cly7796.net より:

        よしみさん
        プログラムが原因ではなく、特定のパソコンのみだとちょっとわからないですね。
        OSの種類やedgeの不具合、機種自体の不具合、拡張機能などの影響 などでしょうか。

      • よしみ より:

        ありがとうございます。

  2. ねこの猫 より:

    はじめまして。コメント内にあったデモ11番(http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/04/)の内容について質問があり書き込みをします。

    デモ11番はグループ内で画像表示がループしますが、これを非ループ設定にするにはどのように記述すればいいのでしょうか。自分は下記のようにloop設定を追加しましたが、設定は認識されず、ループされるままになっています。

    // 別途オプションが必要な場合はこちらに追加してください
    $(‘.lightbox’).colorbox({
    rel: ‘group’,
    loop:’false’, //追記したが設定が効かず
    maxWidth:’95%’,
    maxHeight:’95%’
    });

    表示のためのリンクは、文字列 としました。何卒、ご助言をお願いします。

    • cly7796.net より:

      ねこの猫さん
      コメントありがとうございます。
      loopで指定しているfalseは真偽値になりますので、「loop:’false’」ではなく「loop:false」のように「”」で括らないで記述する必要があります。
      以下に実際のサンプルも置いていますので、合わせてご確認ください。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/11/

      • ねこの猫 より:

        返信ありがとうございます。

        なんとも初歩的なミスで赤面しておりますが、
        ようやく気持ちもソースもすっきりしました。
        サンプルページを参考に、今後も精進致します。
        この度は本当にありがとうございました。

  3. よしみ より:

    別件で教えて欲しいのですが、以前 冨松さんの回答に「現在設定されているgroup1は特に必要ありません。」とありましたが、あえてグループ分けし、その中を「data-light=x」順に並び替えて表示させたい場合
    jsはどう変わりますか?

    • cly7796.net より:

      よしみさん
      何点かご質問をいただいていますので、こちらでまとめて回答いたします。

      > ヘッド内CSSの内容が、高さの固定を解除していることはわかりました。
      > 導入してみました 1)他の写真も、Titleの上下に一段分ずつ伸びる
      > 2)枠線がなくなる などが起こりますが、改善方法はありますか?
      使用しているモーダルのデザインテーマや設定しているオプションによって
      CSSの調整が必要になるかと思います。
      例えば他のデザインテーマだと、以下のような設定になります。
      (以前と同じくhead内でCSSを設定しています。)
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/06/
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/06-2/
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/06-3/
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/06-4/
      ただ、CSSで強引に調整する形で対応していますので、
      細かな部分の調整が難しい場合もあります。

      > 追加で、【ページ数/総ページ数】も非表示にしたいです
      この部分の表示はオプションのcurrentで変更できますので、
      current: ”のように空にすると非表示にできます。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/07/

      > 別件で教えて欲しいのですが、以前 冨松さんの回答に「現在設定されているgroup1は特に必要ありません。」とありましたが、あえてグループ分けし、その中を「data-light=x」順に並び替えて表示させたい場合
      > jsはどう変わりますか?
      作成しているサンプルではグループ毎に分ける想定で作成していませんので、
      HTMLとJavaScript部分を変更する必要があります。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/08/
      data-lightboxと合わせてdata-groupという属性を追加して、
      ライトボックスをグループ分けするようにしています。

      • よしみ より:

        ありがとうございました。
        やってみます。

      • よしみ より:

        2つ導入してみました。Titleについては、一部修正(titleと矢印キーの行を一つにしました)して導入でいました。ただ、グループ分けで並び替える場合、複数グループの場合は問題ないのですが、1グループの場合エラーになります。1グループでも、複数グループでも使用可能なJSはどうしたらいいでしょう?

        • cly7796.net より:

          よしみさん
          > ただ、グループ分けで並び替える場合、複数グループの場合は問題ないのですが、1グループの場合エラーになります。1グループでも、複数グループでも使用可能なJSはどうしたらいいでしょう?
          こちらですが、属性として追加しているdata-groupの値を1種類にすれば1グループになるかと思います。
          以下サンプルはJavaScriptの内容は同じで、data-groupの値のみ変更しています。
          ■グループが1つの場合(data-group=”a”のみ)
          http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/09/
          ■グループが複数の場合(data-group=”a”とdata-group=”b”)
          http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/09/index2.html

          • よしみ より:

            ありがとうございます。
             グループ名を1つにすれば、できることは理解できています。
            ただ、1グループの場合、data-groupの設定をしたくないと思っています。
            また、過去のHTMLでdata-groupの設定していないものがあるので、
            data-groupの設定の有無にかかわらず、共通的に利用できないかと考えています。
             たとえば、data-groupの設定があるか確認し、ない場合は、data-groupの値を
            JS側で入力して、エラーが発生しないようにできないですか?

          • cly7796.net より:

            よしみさん
            > また、過去のHTMLでdata-groupの設定していないものがあるので、
            > data-groupの設定の有無にかかわらず、共通的に利用できないかと考えています。
            >  たとえば、data-groupの設定があるか確認し、ない場合は、data-groupの値を
            > JS側で入力して、エラーが発生しないようにできないですか?
            こちら「過去のHTMLでdata-groupの設定していないもの」とありますが、data-lightboxも設定されていない想定で合っているでしょうか。
            ページ内にdata-groupの設定があるかを確認して、ない場合は別途colorbox設定を行えばできるのではないかと思います。
            ■data-groupの設定がない(class=”lightbox”をライトボックスの対象にする)
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/10/
            ■グループが複数の場合(data-group=”a”とdata-group=”b”)
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/10/index2.html

          • よしみ より:

            回答ありがとうございます
            面倒くさいことで何度も確認させていただき申し訳ありません
            結論は以下の通りですよね
            1)1グループ・複数グループでも、上から順に表示する場合は、基本のJS(group指定のみ)
            2)1グループで、任意に表示する場合は、以前 冨松さんに作成したJS(data-lightbox指定)
            3)複数グループで、任意に表示する場合は、今回作成していただいたJS(data-lightbox・data-group指定)
            今回、検討をお願いしたいのは、2)3)をまとめ共通に使えるように1つのJSにならないかということです。そうすれば、以前作成したHPにも適用できると考えています。よろしくお願いします。
            もちろん1)2)3)すべてに適用できるJSがベストです。

          • cly7796.net より:

            よしみさん
            > 1)1グループ・複数グループでも、上から順に表示する場合は、基本のJS(group指定のみ)
            > 2)1グループで、任意に表示する場合は、以前 冨松さんに作成したJS(data-lightbox指定)
            > 3)複数グループで、任意に表示する場合は、今回作成していただいたJS(data-lightbox・data-group指定)
            こちらの3パターンで使える想定でjsファイル修正しました。

            ■data-groupとdata-lightboxを設定していて、data-groupが複数グループある場合
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/12/
            ■data-groupとdata-lightboxを設定していて、data-groupが1グループの場合
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/12/index2.html
            ■data-lightboxのみ設定している場合
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/12/index3.html
            ■グループを設定しない場合(class=”lightbox”で設定)
            http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/12/index4.html

            各サンプルjsは同じ内容で、HTML上の設定のみ変更しています。
            こちらでどうでしょうか。

  4. よしみ より:

    colorboxを便利に使っていますが、キャプションの文字数が増えると、写真と重なってしまいます。
    文字数が増えた場合、自動的に高さを自動調整することはできませんか?

    • cly7796.net より:

      よしみさん
      コメントありがとうございます。

      オプションだと設定する項目がなさそうなので、やるとしたらCSSを上書きして、高さの固定を解除するくらいしかなさそうな気がします。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/05/

      • よしみ より:

        早速の回答ありがとうございます。サンプルurlを見たのですが、まだ、勉強中なので「高さの固定を解除する」cssが具体的にわかりません。具体的に教えてください。

      • よしみ より:

        ヘッド内CSSの内容が、高さの固定を解除していることはわかりました。
        導入してみました 1)他の写真も、Titleの上下に一段分ずつ伸びる
        2)枠線がなくなる などが起こりますが、改善方法はありますか?

    • よしみ より:

      追加で、【ページ数/総ページ数】も非表示にしたいです

  5. 冨松義男 より:

    冨松義男と申します。
    先日は私どもと一緒にHPを作っています吉川亨あてに、画像をファイル名順に並べるサンプルを作って
    頂きありがとうございました。これの基づき下記のページを作って見ました。
    http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104.html
    ただし、上記ページではgroup1,group2のjqueryをコメントアウトの要がありました。

    この状態でページを見ると確かにファイル名順に画像は表示されますが、次のような現象も出ます。
    ・styleのキャプションが表示されない。
    ・画像のクリックを続けると、最終からはトップの画像に戻らない。
    ・RWD化していますが、スマホで画像が画面から溢れる。
     (コメントアウトしたmaxWidth:’100%’,maxHeight:’100%’が働かなくなっている)

    実はこの投稿は2回目になります。初回の投稿の方法がまずく届いていないかもと・・・
    失礼の段はお許しください。お忙しいのに申し訳ありません。

    • cly7796.net より:

      冨松義男さん
      コメントありがとうございます。

      > ただし、上記ページではgroup1,group2のjqueryをコメントアウトの要がありました。
      こちらですが、jsを使って以下のような方法でライトボックスを設定しているため、
      HTML上で設定されている内容は使用しないようになっています。
      そのため、現在設定されているgroup1は特に必要ありません。

      ① data-lightboxを設定しているaタグから順番と画像を取得

      ② ①で取得したものを小さい順に並べかえて、HTML上にライトボックスの要素を追加
      (非表示にしているため、ブラウザ上からは見えません。)

      ③ data-lightboxを設定したリンクをクリックすると、②で設定した要素を使ってライトボックスを表示

      ②で追加した要素に関しては、開発者ツールでご確認いただくと
      bodyの閉じタグ直前のdiv内にaタグが追加されているかと思います。

      > ・styleのキャプションが表示されない。
      > ・RWD化していますが、スマホで画像が画面から溢れる。
       (コメントアウトしたmaxWidth:’100%’,maxHeight:’100%’が働かなくなっている)
      こちらですが、上記で説明しました通りHTML上で設定いただいているものとは別の方法で設定しているため、
      そちらに設定を追加する必要があります。
      いただいたサンプルページを参考に設定を追加しましたので、こちらをご確認いただけますでしょうか。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/04/

      > ・画像のクリックを続けると、最終からはトップの画像に戻らない。
      いただいたサンプルページを拝見すると、body開始タグの直後でiframeにdata-lightbox=”1″が設定されているようです。
      そのため、ライトボックスで表示する画像が見つからずにローディングのまま止まっているのかと思います。

      何か問題があるようでしたらコメントいただけますと幸いです。

      • 冨松義男 より:

        冨松と申します。
        colorboxの画像の表示順序を任意に指定する方法を、下記URLでご教示いただきました。
        http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/04/
        上記URLを参考にして私どもは下記のページを作って見ました。
        ・http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104.html
         (画像の表示順序を任意に指定する例)
        ・http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104-w.html
         (画像の表示順序を任意に指定し、かつcolorbox本来の画像表示順序を併用する例)
        私どもHPを作るグループの皆で確認しましたが、思い通りのものができたと喜んでいます。
        お礼が遅くなってしまったことお許しください。ご指導ありがとうございました。

        • cly7796.net より:

          冨松義男さん
          実装のご報告ありがとうございます!
          うまく実装できたようでよかったです。

  6. ishigamori より:

    webのポートフォリオを自作しておりまして検索からここに辿り着きました。
    少しカスタマイズに苦戦しておりまして少しお聞きしたくコメントしております。

    長文すみません。質問コーナーではないのは重々承知ですが
    1週間ほど悩んでまして、もしご教授いただけましたら幸いです。

    現在サムネからクリックして画像ページ(別URL)をライトボックスで開くようにしたく、
    フルスクリーン表示(元のページいっぱいかぎりぎり)にしたいのですがなかなかできず困っております。
    optionのdimensionsのinnerWidth、width,initialwidth等を100%にしてもデフォルトのサイズ感?(恐らく)
    が元のままでうまくいかずという具合です。

    もし迷惑でしたらこのコメント毎削除していただいて構いません。
    宜しくお願い致します。

  7. 吉川 亨(きっかわとおる) より:

    Lightboxに変えColorboxを愛用しています。素晴らしいソフトと思います。画像をクリックしたときの表示順を、ファイル番号順に変えることはできませんか。現在はソースの記述順になっています。
    幾つかの表の中に画像を任意に入れているページがあるのですが、(1枚1枚をクリックして拡大して見る分には問題はないのですが)スライドショー的に見る場合、時系列的に作成したファイル番号順に見せたいのです。よろしくお願い致します。2017-11-15

    • cly7796.net より:

      吉川 亨さん
      コメントありがとうございます。
      ファイル番号順とは少し違いますが、以下にサンプルをアップしました。
      http://cly7796.net/wp/sample/plugin-jquery-colorbox/03/01/
      data属性を使って、data-lightboxに表示したい順番を指定するようにしています。
      詳しくはコードをご確認いただければと思います。

  8. kwhr より:

    初めてコメント差し上げます。

    callbacks関数のonCompleteが二つになっています。
    二つ目の記述をonCleanupに修正よろしくお願いします。

    • cly7796.net より:

      kwhrさん
      ご指摘ありがとうございます。
      onCleanupの部分を修正いたしました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP