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

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。
onComplete ライトボックスを閉じる処理開始時に実行。
初期値は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 ライトボックスが閉じられてから実行。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP