C04-07 : ColorBox

準備

jQueryライブラリのため、jQueryとセットで読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
<link type="text/css" rel="stylesheet" href="colorbox.css">
<script type="text/javascript" src="jquery.colorbox.js"></script>

画像を開く

画像をページ上にオーバーレイ表示します。また、オプション機能を使ってグループ化することでスライドショーを作ることができます。

$(function(){
	$(".colorbox").colorbox({rel: 'group1'});
});

<a href="img/001.jpg" class="colorbox"><img src="img/001_t.jpg" height="100" width="100" alt=""></a>
<a href="img/002.jpg" class="colorbox"><img src="img/002_t.jpg" height="100" width="100" alt=""></a>
<a href="img/003.jpg" class="colorbox"><img src="img/003_t.jpg" height="100" width="100" alt=""></a>
<a href="img/004.jpg" class="colorbox"><img src="img/004_t.jpg" height="100" width="100" alt=""></a>
<a href="img/005.jpg" class="colorbox"><img src="img/005_t.jpg" height="100" width="100" alt=""></a>

HTMLを開く

Ajax、iframe、inlineの3つの方法でHTMLを読み込み、内容をオーバーレイ表示します。

HTMLの表示（Ajax）
HTMLの表示（iframe）
HTMLの表示（inline） 
$(function(){
	$(".ajax").colorbox();
	$(".iframe").colorbox({iframe: true, width: 600, height: 300});
	$(".inline").colorbox({inline: true});
});

<a href="ajax.html" class="ajax">HTMLの表示（Ajax）</a>

<a href="iframe.html" class="iframe">HTMLの表示（iframe）</a>

同ドキュメント内の要素を移すため、読み込み元のスタイルシートが適用されます。

Web制作の現場では１から機能を作ることは多くありません。Webアプリケーションの制作ともなると、独特な仕様やパフォーマンス向上のために特化したものを作成することはありますが、基本的には実装したい機能の仕様を満たすライブラリがないかを探して使います。
ときにはそのライブラリをカスタマイズして使うこともあるため、高機能かつシンプルでライセンスはMITかGPLのものを選びます。
１から作れる技術力も大事ですが、こうしたライブラリの知識も制作の幅を広げることができますし制作もスピーディに行えるため必須となります。

Youtubeを開く

Youtubeの埋め込みコードにあるiframeのsrc属性を指定することでYoutube動画をオーバーレイ表示することができます。

Youtubeの表示 
$(function(){
	$(".youtube").colorbox({iframe: true, width: 640, height: 480});
});

<a href="http://www.youtube.com/embed/6PGznR2a9xk" class="youtube">Youtubeの表示</a>

コールバックを受け取る

ColorBoxを「開く」「読み込む」「読み込み完了」「閉じる」といったタイミングでコールバック関数を受け取ることができます。

callbacks 
$(function(){
	$(".callbacks").colorbox({
		onOpen:function(){ alert('ColorBoxを開く'); },
		onLoad:function(){ alert('コンテンツを読み込む'); },
		onComplete:function(){ alert('コンテンツの読み込みが完了'); },
		onCleanup:function(){ alert('ColorBoxを閉じる'); },
		onClosed:function(){ alert('ColorBoxが閉じられた'); }
	});
});

<a href="img/001.jpg" class="callbacks">callbacks</a>

オプション

プロパティ 初期値 説明
コールバック
onOpen false ColorBoxが開く直前に実行されます。
onLoad false コンテンツの読み込みを開始する直前に実行されます。
onComplete false コンテンツが読み込まれColorBoxが表示されたときに実行されます。
onCleanup false ColorBoxを閉じる直前に実行されます。
onClosed false ColorBoxが完全に閉じられたら実行されます。
アニメーション
transition "elastic" アニメーションの種類を "elastic" or "fade" or "none" の中から設定します
speed 350 ミリ秒単位でアニメーションの速度を設定します。
スライドショー
slideshow false trueの場合、スライドショーの自動再生機能を追加します。
slideshowSpeed 2500 ミリ秒単位で自動スライドの秒数を設定します。
slideshowAuto true trueの場合、スライドショーが自動的に再生を開始します。
slideshowStart "start slideshow" スライドショーの再生ボタンのテキストを設定します。
slideshowStop "stop slideshow" スライドショーの停止ボタンのテキストを設定します。
大きさ
width false ColorBoxの幅をピクセルやパーセントで設定します。この値には罫線やボタンを含むため、画像の大きさはここで指定した値より小さくなります。
height false ColorBoxの高さをピクセルやパーセントで設定します。この値には罫線やボタンを含むため、画像の大きさはここで指定した値より小さくなります。
innerWidth false ColorBoxの幅をピクセルやパーセントで設定します。この値には罫線やボタンを含まないため、、画像の大きさはここで指定した値になります。
innerHeight false ColorBoxの高さをピクセルやパーセントで設定します。この値には罫線やボタンを含まないため、、画像の大きさはここで指定した値になります。
initialWidth 300 画像やコンテンツを読み込む前の初期の幅を設定します。
initialHeight 100 画像やコンテンツを読み込む前の初期の高さを設定します。
maxWidth false ColorBoxの最大の幅を設定します。
maxHeight false ColorBoxの最大の高さを設定します。
scalePhotos true trueの場合に maxWidth、maxHeight、innerWidth、innerHeight、width​​、height が定義されている場合に、それらの値内に収まるように写真を縮小します。
テキスト
current "image {current} of {total}" スライドの現在地を示すテキストを設定します。
$('.colorbox').colorbox({
	current: '画像：{current}/{total}'
})
previous "previous" スライドの「前へ」ボタンのテキストを設定します。
next "next" スライドの「次へ」ボタンのテキストを設定します。
close "close" 「閉じる」ボタンのテキストを設定します。
代替
href false 代替のアンカーURLとして使用したり、画像やフォームボタンなど非アンカー要素にURLを関連付けることができます。
$("h1").colorbox({href:　"welcome.html"});
title false title属性の代替として使用することができます。
rel false rel属性の代替として使用することができます。これにより、rel属性が異なる要素をグループ化することができるようになります。
$("a.gallery").colorbox({rel:"group1"});
コンテンツタイプ
iframe false trueの場合、コンテンツをiframeで表示します。
inline false trueの場合、ドキュメント内の要素をコンテンツとして表示します。 
$(".inline").colorbox({inline: true});
<a href="#myForm" class="inline">colorbox</a>
or
$(".inline").colorbox({inline: true, href:"#myForm"});
or
var $form = $("#myForm");
$(".inline").colorbox({inline: true, href:$form});
html false trueの場合、設定したHTMLを表示します。
$('.html').colorbox({html:"<p>Hello</p>"});
位置
fixed false trueの場合、ColorBoxはブラウザ内に固定配置されます。
top false ColorBoxのY軸位置をブラウザのtopを基準にピクセルやパーセントで設定します。
bottom false ColorBoxのY軸位置をブラウザのbottomを基準にピクセルやパーセントで設定します。
left false ColorBoxのX軸位置をブラウザのleftを基準にピクセルやパーセントで設定します。
right false ColorBoxのX軸位置をブラウザのrightを基準にピクセルやパーセントで設定します。
その他
scrolling true コンテンツがColorBoxの大きさに収まらなかった場合に表示されるスクロールバーの”表示” or "非表示"を設定します。
opacity 0.85 0～1の範囲でオーバーレイの不透明度を設定します。
open false trueの場合、ページが読み込まれたタイミングでColorBoxを開きます。
returnFocus true trueの場合、ColorBoxが閉じた際にColorBoxを開くイベントを発生させた要素にフォーカスの位置を戻します
fastIframe true falseの場合、iframeのコンテンツが完全に読み込まれるまでローディングアニメーションの削除とonCompleteイベントが延期されます。
preloading true trueの場合、現在のコンテンツのロードが完了した後、グループ内で前後のコンテンツをプリロードすることができます。
overlayClose true trueの場合、オーバーレイ領域をクリックしたときにColorBoxを閉じます。
escKey true trueの場合、escキーを押したときにColorBoxを閉じます。
arrowKey true trueの場合、スライドショーの移動が左右の矢印キーで行えるようになります。
loop true trueの場合、スライドショーがループ（最後の画像の次は最初の画像になる）します。
data false Ajaxリクエストをする際に、GETまたはPOSTデータを送信します。このdataプロパティはjQueryのものと全く同じ動作をします。ColorBoxではloadメソッドを使用しているため、詳しくはjQueryのloadメソッドを参照してください。
xhrError "This content failed to load." Ajaxコンテンツの読み込みに失敗した場合に表示するメッセージを設定します。
imgError "This image failed to load." 画像の読み込みに失敗した場合に表示するメッセージを設定します。

パブリックメソッド

パブリックメソッドは別のJavaScriptからColorBoxの操作を行うためのものです。

$.colorbox() 要素に関連付けずににColorBoxを呼び出します。
$.colorbox({href:"login.php"});
$.colorbox.next()
$.colorbox.prev()		 スライドショーの切り替えを「次」「前」で操作します。
$.colorbox.close() ColorBoxを閉じる処理を実行します。完全に閉じられたかを確認するためには後述するイベントフックを使用します。
$.colorbox.element() ColorBoxを開いた要素を取得します。値はjQueryオブジェクトとして渡ります。
var $element = $.colorbox.element();
$.colorbox.resize() colorboxのりサイズを実行します。引数として width、height、innerWidth、innerHeight を使用することができます。
$.colorbox.remove() ColorBoxを完全に削除します。これが実行された後ではColorBoxが動作しません。

イベントフック

イベントフックは、対応するコールバック同じタイミングで実行されますが、実行順はイベントフックの後にコールバックとなります。
コールバックとの違いは、コールバックが関連付けしたColorBoxにのみ適用されるのに対し、イベントフックは全てのColorBoxに適用されます。 

$(document).bind('cbox_complete', function(){
	alert('ColorBoxが開かれました。');
});
cbox_open ColorBoxが開く直前に実行されます。
cbox_load コンテンツの読み込みを開始する直前に実行されます。
cbox_complete コンテンツが読み込まれColorBoxが表示されたときに実行されます。
cbox_cleanup ColorBoxを閉じる直前に実行されます。
cbox_closed ColorBoxが完全に閉じられたら実行されます。