簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

投稿日：2021/10/23 ｜最終更新：2021/10/28
JavaScript/jQuery
colorbox, モーダル

簡単にモーダルウィンドウを実装できるjQueryプラグインでは、私はColorboxを愛用しています。
今回はColorboxの特徴や利用方法などを解説します。

Colorboxの特徴

Colorboxはモーダルウィンドウで実装したいことが様々実装できます。
モーダルウィンドウを実装できるプラグインは他にも色々ありますが、およそモーダルウィンドウでしたいことを多く網羅しているので、１つのプラグインで複数の機能を持たせることができる柔軟性が魅力でよく利用しています。

例えば下記の通りです。

タイトル（キャプション）を表示できる
デザインが豊富
複数の画像をグループ化して前後に移動できる
画像以外にもiframeでHTMLタグや別HTMLファイルをモーダルで表示できる
レスポンシブにも対応できる
コンテンツが表示される効果やスピードを調整できる
様々なコールバック関数やメソッドが用意されている

ダウンロード・デモ

下記のURLよりダウンロードできます。
また、デフォルトで用意されている５つのデザインパターンのデモも実行できます。

https://www.jacklmoore.com/colorbox/

基本的な使い方（画像をモーダルで表示する）

公式サイトからColorbox本体をダウンロードし、ZIPを解凍する
下記を参考にjs・CSSを読み込む
```
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
```
※cssファイルはexample1～5のディレクトリから好きなもの（自分が使用したいデザインにあっているもの）を利用してください。

※example1～5のディレクトリに入っている[images]ディレクトリもcssファイルと同じ階層に移行してください。

※css/jsのパスは実際の環境に合わせてください。
下記を参考にモーダル表示用HTMLを記述する
```
<a class="colorbox" href="../images/01.jpg" title="タイトル">
  <img src="../images/01.jpg" alt="" />
</a>
```
※aタグのhref属性にモーダルで表示したい画像のURLを記入してください。

※aタグのtitle属性にモーダルで表示したい画像のキャプションを記入してください。

モーダル発動用のjsを記述する

$(function() {
  $(".colorbox").colorbox();
});

オプション一覧

General - 一般

transition	モーダル起動時のアニメーションを指定。初期値は’elastic’。 ‘elastic’or’fade’or’none’
speed	モーダル起動時の速度をミリ単位で指定。初期値は350。
href	モーダルで表示する内容を指定。画像やフォームボタンなどの非アンカー要素のURLを関連付けるために使用できる。初期値はfalse。例：`$("h1").colorbox({href:"welcome.html"});`
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	ajaxリクエストを介してGETまたはPOST値を送信する場合。 dataプロパティはjQueryの`.load()`とまったく同じように機能し、Colorboxはajax処理に`.load()`を使用するためデータ引数とする。初期値はfalse。
className	モーダルコンテンツと背景にclassを追加する。初期値はfalse。
fadeOut	モーダルを閉じるときのフェードアウトの速度をミリ単位で指定。初期値は300。
closeButton	閉じるボタンを表示するかどうか。初期値はtrue。

Internationalization - 国際化（表示文字について）

current	グループ全体の枚数と現在の位置の表示内容を指定。初期値は”image {current} of {total}”。
previous	previousボタンのHTML上のテキストまたはHTMLを指定。初期値は”previous”。
next	nextボタンのHTML上のテキストまたはHTMLを指定。初期値は”next”。
close	closeボタンのHTML上のテキストまたはHTMLを指定。初期値は”close”。
xhrError	特定のURLのajaxコンテンツを読み込めない場合に表示されるエラーメッセージ。初期値は”This content failed to load.”。
imgError	画像のロードに失敗した場合のエラーメッセージ。初期値は”This image failed to load.”。

Content Type - 表示タイプ

iframe	iframeで表示するかどうか。初期値はfalse。
inline	現在のページに埋め込まれている内容を表示する。hrefプロパティにjQueryセレクターまたはjQueryオブジェクトを渡す。初期値はfalse。
html	HTMLタグまたは文字列を直接指定する。初期値はfalse。
photo	trueの場合リンクを写真として表示する。自動写真検出が失敗した場合にこれを使用する。（「photo.jpg」の代わりに「photo.php」のようなURLを使用するなど）初期値はfalse。
ajax	他のコンテンツタイプのいずれかが指定されていない限り、Colorboxはすべてのhrefをajaxまたは写真として扱う必要があると想定しているため、このプロパティは実際には使用されません。

Dimensions - 寸法

width	モーダルの幅をパーセンテージかピクセルで指定。borderやbuttonも含まれる。初期値はfalse。例：「100％」、「500px」、または500
height	モーダルの高さをパーセンテージかピクセルで指定。borderやbuttonも含まれる。初期値はfalse。例：「100％」、「500px」、または500
innerWidth	モーダルの内側の幅。borderやbuttonは除外。初期値はfalse。例：「100％」、「500px」、または500
innerHeight	モーダルの内側の高さ。borderやbuttonは除外する。初期値はfalse。例：「100％」、「500px」、または500
initialWidth	モーダル内の要素を読み込む前の初期の幅。初期値は300。
initialWidth	モーダル内の要素を読み込む前の初期の高さ。初期値は100。
maxWidth	モーダル内の要素の最大幅。初期値はfalse。例：「100％」、「500px」、または500
maxHeight	モーダル内の要素の最大高さを指定。初期値はfalse。例：「100％」、「500px」、または500

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	高解像度のディスプレイの場合に現在の写真のファイル拡張子をretinaSuffix + extensionに置き換えるか。初期値はfalse。
retinaSuffix	retinaUrlがtrueで高解像度のディスプレイの場合に、ファイル名の末尾をどう変更するかを指定。初期値は `my-photo.jpg`を` my-photo @ 2x.jpg`に変更する。

Callbacks - コールバック関数

onOpen	モーダルが開き始める前に実行。初期値はfalse。
onLoad	モーダルのコンテンツを読み込もうとする直前に実行。初期値はfalse。
onComplete	モーダルが表示された直後に実行。初期値はfalse。
onCleanup	モーダルを閉じる処理開始時に実行。初期値はfalse。
onClosed	モーダルが閉じられた後に実行。初期値はfalse。

Public Methods - パブリックメソッド

$.colorbox()	要素に割り当てずにモーダルを開く。 `$.colorbox({href:"login.php"});`
$.colorbox.next()	グループ間の次の要素へ移動する。次へボタンを押すのと同じ動作。
$.colorbox.prev()	グループ間の前の要素へ移動する。前へボタンを押すのと同じ動作。
$.colorbox.close()	モーダルを閉じる。閉じるボタンを押すのと同じ動作。
$.colorbox.element()	モーダルが関連付けられている現在のHTML要素を取得する。要素を含むjQueryオブジェクトを返します。例：`var $element = $.colorbox.element();`
$.colorbox.resize([options])	オプションでwidthやinnerWidthなどを指定している場合にはそのサイズにリサイズする。オプションがない場合は自動計算に基づいてリサイズする。
$.colorbox.remove()	モーダルの要素をDOM上から削除する。

Event Hooks - イベントフック

cbox_open	モーダルが最初に開かれたとき、ただしいくつかのキー変数が割り当てられた後に実行。
cbox_load	コンテンツタイプが決定されてロードされるフェーズの開始時に実行。
cbox_complete	モーダルのコンテンツが表示された時に実行。
cbox_cleanup	モーダルを閉じる処理開始時に実行。
cbox_closed	モーダルが閉じられた後に実行。