Colorbox [plug-in] [jQuery]

2014年に制作した記事を2015/07に加筆修正

モーダルウィンドウで（ライトボックス風に）画像などを表示するjQueryプラグインです。
画像だけでなく、動画、htmlなど様々なコンテンツを扱えます。
以下の提供元サイトからダウンロードして、必要なファイルを適切なディレクトリに格納し、読み込んで使用します。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

sample

画像1 画像2 画像3

リンクをクリックすると動作します。

html

<a href="画像のパス" title="（必要であれば）画像のタイトル" class="group">テキストやサムネイル画像など</a>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. aタグに表示したい画像パスを指定。
  2. 表示させたければ画像タイトル（title属性使用）、複数の画像を遷移させたい場合はグループ化（任意の同じclass名・・・ここではgroup）をそれぞれ設定。

サンプルではaタグを羅列していますが、適宜リスト化したりしてください。

css

#cboxOverlay{opacity: 0.8; filter: alpha(opacity =80);}
#cboxLoadingGraphic{background:url(ローディング画像のパス) no-repeat center center;}
#cboxLoadedContent{background:#999;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {background-image:url(コントロール画像のパス);}
#cboxTitle{color:#999;}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 提供元サイトにデモがあるので、使いたいパターンを選ぶ（遷移ボタンの位置など自分がイメージするものに近いものを選ぶ）。
  2. デモの番号と、提供元サイトからダウンロード後、解凍してできたディレクトリの中のexample1～example5ディレクトリの数字が対応するので、該当ディレクトリからcssファイルを適切なディレクトリにコピペ（ローディング画像やコントロール画像をそのまま使いたい場合はそれらも適切なディレクトリにコピペ）。
    colorboxを適用させたいhtmlファイルに読み込ませる。
  3. cssファイルには[User Style:]などとコメントアウトされている部分があるので、それより後のcssをカスタマイズできる（通常それより上の部分は修正の必要はない）。
    コントロール画像のパスであるとか、マウスオーバー時の画像の位置であるとか、適宜書き換える。
  • サンプルではexample2を使用し、cssを上書きしています。上記のcssは書き換えた部分だけ抜粋しています。
  • cssでとじるボタンなどの画像を差し替えたり、位置を調整したりすることで、ある程度好きなデザインに変更できます。
    どのid名/class名がどの部分に対応しているかわからなければ、firebugやブラウザの開発ツールなどを使用して調べてみてください。

js

$(function(){
  $('a').colorbox({rel:'group', transition:'fade'});
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

  1. 基本的には
    $('セレクター').colorbox();
    このコードのみでセレクターで指定したリンクをクリックすると、リンクで指定した画像などをオーバーレイで表示する。
    上記の例だと、そのページ内のaタグすべてにcolorboxが適用されてしまうので、特定のリンクのみに適用したい場合は、class名などをセレクターにする。
  2. オプションを指定したい場合は、{}内に,（コンマ）で区切って、指定。
    グループ化したものをnext/previousボタンで遷移させたい場合は、relオプションで同じclass名を指定。
  3. 画像の切り替えをfadeIn/Outで表示させたい場合はtransitionオプションでfadeを設定する

その他の細かい設定や画像以外をオーバーレイで表示する方法は、提供元サイトのUsageやSettingsの項目、デモのソースを参考にするか、このページの下の方にある参考をご覧ください。
提供元サイトは英語のみですが、比較的わかりやすい英語で記述されています。情報も適切にまとめられているので、この手のサイトの中ではわかりやすい方だと思います。

閉じるボタン（など）が動いてしまう場合

閉じるボタンなどの位置をcssで変更すると、colorboxを表示させた際にボタンが本来の位置から移動してくるように見える場合があります。
それを回避する方法の一つとして、コールバック関数を用いた例を紹介します。
ここではcolorboxの状態によって表示のタイミングをずらしています（解決方法はほかにもあると思うので、余裕があるときはよりスマートな方法を考えてみてください）。

セレクターは適宜変更してください。

$(function(){
  $('a').colorbox({inline:true, opacity:0.5, onLoad:function(){
    $('#cboxClose').hide(); //colorbox読み込み時にボタンを非表示にする
  },onComplete:function(){
    $('#cboxClose').show(); //colorbox読み込み後にボタンを表示する
  }});
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

「いいえ」をクリックすると閉じます

はい

「いいえ」をクリックすると閉じます

はい

コールバック関数については、提供元サイトのCallbacks等の項目やこのページの下の方にある参考をご覧ください。

Chromeで青い枠線が表示されてしまう場合

chromeでcolorboxを開いたとき、（colorboxが古いバージョンだと）オーバーレイで表示したコンテンツの周りに青い枠線が表示されることがあります。
オブジェクトがフォーカスされているとき（たとえば入力フォームに入力中の箇所とか）表示される線なので、気にすることはないんですが、気になるときはcssに以下の記述を追加してください。

#colorbox:focus {
    outline: none;
}

この例ではid[colorbox]（colorboxによって自動的に挿入されるdivタグのid）に対して、focusした時のアウトラインを表示しないように設定しています。
Ver.1.6.3では問題の青い枠線は表示されないようです。

ただし、閉じるボタンや前後に移動するボタンなどにはchromeで青い枠が表示されるようなので、気になる場合はbutton要素に対して、focusした時のアウトラインを表示しないように設定します（colorboxのバージョンによってはこれらのボタンはbutton以外の要素の可能性があります）。

#colorbox button:focus {
    outline: none;
}

ちなみに#colorbox button:focusを*:focusにすればページ内の全ての要素に対してフォーカス時のアウトラインを表示しないようにできます。
ただし、入力フォームなどはどこをフォーカスしているか（どこに入力しようとしているか）わかりにくくなってしまい、ユーザビリティ・アクセシビリティの低下につながる可能性があります。
リンクオブジェクトがアクティブのときに表示される点線を消すときなどにもoutline: noneは使いますが、使いどころに注意しましょう。

画像は表示するのにinline表示しない場合

colorboxで画像のみの場合は表示するのに、inline表示（同一ページ内に非表示で記述しておいたhtmlコンテンツをオーバーレイで表示）はうまくいかない場合があります。
記述コードに誤りがないのであれば、原因はスムーススクロール（jsなどでページ内リンクへふんわり移動させる）にあるかもしれません。
inline表示の場合は同一ページ内に非表示で記述しておいたhtmlコンテンツをid名で呼び出して表示しますが、ページ内スクロールもid名の場所に移動するため、スムーススクロールを同時に使用すると、スムーススクロールを優先して、colorboxでのinline表示が動作しなくなるようです。

スムーススクロールも同時に使いたい場合は、スムーススクロールで移動したい場所を判定する文字を#だけではなく共通の接頭辞を追加してみてください。

プラグインsmoothScroll.jsを使っている場合は、inlineコンテンツを呼び出すリンクに
data-tor-smoothScroll="noSmooth"
を追加してみてください（参考）。

モーダルウィンドウの是非

webページに大きな画像をたくさん載せると重くなったりスクロールが長くなるのでサムネイルだけ載せて、別途拡大画像を見せたいとか、ほかのページに移動するまでもないけれどちょっとした情報を見たいユーザにだけ知らせたいとかといった時に、モーダルウィンドウは便利です。

しかし、ユーザビリティ・アクセシビリティといった観点から、本当にこの方法がベストなのか、一度考えてから導入した方がよいでしょう。

モーダルウィンドウにしたコンテンツを見るには、クリックまたはタップという作業をユーザーに強要するわけですから、1ページあたりのモーダルウィンドウを開く＋閉じるという作業が多くなるほど、ユーザーはうんざりしてきます（まぁ、制作する方もうんざりなんですけどね）。

また、モーダルウィンドウの挙動に慣れないユーザはクリックして表示したものをどうしたらいいか、元のページに戻るにはどうしたらいいか、戸惑うものです。

ユーザの端末に合わせた見せ方、不慣れなユーザも戸惑わせない工夫等、よく考えて利用しましょう。

戻る

Top