colorbox(jQuery lightbox)の汎用的な使い方サンプルとエラーが表示される場合の対処
先日、Bootstrapのmodal表示機能をご紹介しましたが、colorboxも良く使われるモーダル表示のライブラリです。
jQueryがあれば動くので、結構、多くの人が使っていると思います。
目次
colorboxの良いところ
モーダル表示させるときの振る舞いや表示位置など、動きの細かい制御が可能。
モーダルオープン時、コンテンツロード時、クローズ時などのイベントをハンドリンクできるため、それらを契機に、さまざまな振る舞いをJavaScriptで記述することができる。
一方、デザインは、カスタマイズしにくい。
(デザインについては、Bootstrapのmodalのほうがカスタマイズしやすい印象です。)
多くの人が使っているので、ネット上に情報がたくさんあります。困ったときに調査し、ソリューションを見つけやすいです。
Bootstrapのmodalの組み込み方
jQueryを使いって実現されているので、jQueryをダウンロードしておきます。
https://jquery.com/
このサンプルでは、Ver3.3.1を利用しました。
また、colorboxもダウンロードしておきます。
http://www.jacklmoore.com/colorbox/
ダウンロードしたcolorboxのファイルを解凍すると、example1～example5のサンプルも入っています。この中には、異なるデザインのcssとイメージがありますので、利用してみて、自分のイメージ近いサンプルのcssを使うとよいでしょう。
デザインをカスタマイズする場合も、これらを元に変更するといいです。
さて、用意はこの「jQuery 3」と「colorbpx」だけなので、準備できたら、以下のソースを記載します。
親画面のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<title>colorbox modal sample parent page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script src="./jquery-3.3.1.min.js"></script>
<script src="./colorbox-master/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="./colorbox-master/example4/colorbox.css" />
<h1>colorbox modal sample parent page</h1>
<script type="text/javascript">
function call_cbox() {
jQuery.colorbox({href:'./c1.html'
,scrolling:'auto'
//,iframe:true
,height:'80%'
,width:'80%'
,title: function(){
var custom_btn = '<button type="button" id="custom_btn" onclick="cbox_button_called(); return false;">CustomBtn</button>';
return custom_btn;
}
});
}
function cbox_button_called(){
console.log('cbox_button_called');
$('#cboxClose').click();
$('#cboxOverlay').remove();
$('#colorbox').remove();
}
$(document).bind('cbox_complete', function(){
console.log('cbox_complete');
});
</script>
<a href="#" onclick="call_cbox(); return false;">call colorbox</a>
</body>
</html>
子画面のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <head> <title>colorbox modal sample child page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>colorbox modal sample child page</h1> </body> </html>
ソースの内容とつまづきやすいポイントを解説
基本的には、「jQuery.colorbox」を呼べばいいのですが、いろいろと複雑な動きをさせようと思うと、考慮点が多いので、そういうときでも汎用的に使えるように、解説を追記します。
jQuery.colorboxのオプションと、カスタムのボタンを表示させる方法
「jQuery.colorbox」には以下のようにオプションが渡せます。
オプションの詳細は上記のダウンロードページに詳しくのっていますが、「iframe:true」をtrueにしたりfalseにしたりすることで、iframeとしてモーダル画面のコンテンツをロードできます。
また、「title」というオプションは、モーダル画面に表示するタイトルをセットできますが、これにhtmlでボタンを渡すことで、モーダル画面にカスタムのボタンを複数追加することもできます。
jQuery.colorbox({href:'./c1.html'
,scrolling:'auto'
,iframe:true
,height:'80%'
,width:'80%'
,title: function(){
var custom_btn = '<button type="button" id="custom_btn" onclick="cbox_button_called(); return false;">CustomBtn</button>';
return custom_btn;
}
});
充実のイベントフック
最初に述べましたが、モーダルの開閉時やコンテンツロード時などにイベントをフックできますので、そのタイミングでさまざまな処理を行なうことが出来ます。
下記は、コンテンツがロードされた直後に、ログを吐くサンプルです。
$(document).bind('cbox_complete', function(){
console.log('cbox_complete');
});
何回もボタンを閉じたりしたときなどに動きがおかしくなる場合の対処
colorboxは、初期化の際に、モーダルのコンテンツを読み込むdiv領域を挿入して、それを擬似的にモーダルっぽく見せています。（多くのモーダルのライブラリもそうですが）
なので、複数回開いたり閉じたりすると、競合を起こして、動きがおかしくなって開かなくなったり、ブラウザのデバッグコンソールでjavascriptのエラーが表示されたりします。
そんな場合は、「閉じる」際に、挿入されたdiv領域(#cboxOverlay)などをきれいに除去してあげると良いです。下記みたいに。
function cbox_button_called(){
console.log('cbox_button_called');
$('#cboxClose').click();
$('#cboxOverlay').remove();
$('#colorbox').remove();
}
