色々な機能のライトボックスを実装できる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。 |
| onCleanup | ライトボックスを閉じる処理開始時に実行。 初期値は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 | ライトボックスが閉じられてから実行。 |
【参考サイト】
以前、Jquery Colorboxで指導いただいたよしみです
最近、Wordpressの導入を検討しているんのですが
ColorboxをWordpressのプラグインとして使えます？
もし使えるなら、使い方や注意点を教えてください
よしみさん
WordPressでColorboxを使用できるプラグインとして、「WordPress Colorbox Lightbox」というプラグインがあるようです。
https://ja.wordpress.org/plugins/wp-colorbox/
上記紹介ページ中段に使い方の記載がありますが、ショートコードで埋め込みができます。
以前、グループ別に並び替える JQuery を教えていただいた よしみです。
一点、奇妙なことが起こったのですが、確認すべき項目を教えてください
奇妙なことは、edgeで、colorbox拡大表示後、写真外をクリックし、マウスを移動させると
写真の表示位置でなく、最下段に移動してしまうのです。
思いつく原因は何かありますか？
ややこしい質問で申し訳ありません。
よしみさん
実際の動作を見ていないので憶測でしか言えないですが、考えられそうなのは
① ライトボックスを閉じたときに 元のリンクにフォーカスを戻す機能があるので、そのあたりが影響している。
② JavaScriptで何らかのエラーが出ていて、意図しない挙動になっている。
③ 他のJavaScriptが影響している。
などでしょうか。
ありがとうございます
特定のＰＣのみが動作が異常ですので、プログラムは異状ないと思います。
ＰＣに起因する原因は何が考えられますか？
よしみさん
プログラムが原因ではなく、特定のパソコンのみだとちょっとわからないですね。
OSの種類やedgeの不具合、機種自体の不具合、拡張機能などの影響 などでしょうか。
ありがとうございます。
はじめまして。コメント内にあったデモ11番（https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/04/）の内容について質問があり書き込みをします。
デモ11番はグループ内で画像表示がループしますが、これを非ループ設定にするにはどのように記述すればいいのでしょうか。自分は下記のようにloop設定を追加しましたが、設定は認識されず、ループされるままになっています。
// 別途オプションが必要な場合はこちらに追加してください
$(‘.lightbox’).colorbox({
rel: ‘group’,
loop:’false’, //追記したが設定が効かず
maxWidth:’95%’,
maxHeight:’95%’
});
表示のためのリンクは、文字列 としました。何卒、ご助言をお願いします。
ねこの猫さん
コメントありがとうございます。
loopで指定しているfalseは真偽値になりますので、「loop:’false’」ではなく「loop:false」のように「”」で括らないで記述する必要があります。
以下に実際のサンプルも置いていますので、合わせてご確認ください。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/11/
返信ありがとうございます。
なんとも初歩的なミスで赤面しておりますが、
ようやく気持ちもソースもすっきりしました。
サンプルページを参考に、今後も精進致します。
この度は本当にありがとうございました。
別件で教えて欲しいのですが、以前 冨松さんの回答に「現在設定されているgroup1は特に必要ありません。」とありましたが、あえてグループ分けし、その中を「data-light=x」順に並び替えて表示させたい場合
ｊｓはどう変わりますか？
よしみさん
何点かご質問をいただいていますので、こちらでまとめて回答いたします。
> ヘッド内CSSの内容が、高さの固定を解除していることはわかりました。
> 導入してみました １）他の写真も、Titleの上下に一段分ずつ伸びる
> ２）枠線がなくなる などが起こりますが、改善方法はありますか？
使用しているモーダルのデザインテーマや設定しているオプションによって
CSSの調整が必要になるかと思います。
例えば他のデザインテーマだと、以下のような設定になります。
(以前と同じくhead内でCSSを設定しています。)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/06/
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/06-2/
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/06-3/
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/06-4/
ただ、CSSで強引に調整する形で対応していますので、
細かな部分の調整が難しい場合もあります。
> 追加で、【ページ数／総ページ数】も非表示にしたいです
この部分の表示はオプションのcurrentで変更できますので、
current: ”のように空にすると非表示にできます。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/07/
> 別件で教えて欲しいのですが、以前 冨松さんの回答に「現在設定されているgroup1は特に必要ありません。」とありましたが、あえてグループ分けし、その中を「data-light=x」順に並び替えて表示させたい場合
> ｊｓはどう変わりますか？
作成しているサンプルではグループ毎に分ける想定で作成していませんので、
HTMLとJavaScript部分を変更する必要があります。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/08/
data-lightboxと合わせてdata-groupという属性を追加して、
ライトボックスをグループ分けするようにしています。
ありがとうございました。
やってみます。
２つ導入してみました。Titleについては、一部修正（titleと矢印キーの行を一つにしました）して導入でいました。ただ、グループ分けで並び替える場合、複数グループの場合は問題ないのですが、１グループの場合エラーになります。１グループでも、複数グループでも使用可能なJSはどうしたらいいでしょう？
よしみさん
> ただ、グループ分けで並び替える場合、複数グループの場合は問題ないのですが、１グループの場合エラーになります。１グループでも、複数グループでも使用可能なJSはどうしたらいいでしょう？
こちらですが、属性として追加しているdata-groupの値を1種類にすれば1グループになるかと思います。
以下サンプルはJavaScriptの内容は同じで、data-groupの値のみ変更しています。
■グループが1つの場合(data-group=”a”のみ)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/09/
■グループが複数の場合(data-group=”a”とdata-group=”b”)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/09/index2.html
ありがとうございます。
グループ名を１つにすれば、できることは理解できています。
ただ、１グループの場合、data-groupの設定をしたくないと思っています。
また、過去のHTMLでdata-groupの設定していないものがあるので、
data-groupの設定の有無にかかわらず、共通的に利用できないかと考えています。
たとえば、data-groupの設定があるか確認し、ない場合は、data-groupの値を
JS側で入力して、エラーが発生しないようにできないですか？
よしみさん
> また、過去のHTMLでdata-groupの設定していないものがあるので、
> data-groupの設定の有無にかかわらず、共通的に利用できないかと考えています。
> たとえば、data-groupの設定があるか確認し、ない場合は、data-groupの値を
> JS側で入力して、エラーが発生しないようにできないですか？
こちら「過去のHTMLでdata-groupの設定していないもの」とありますが、data-lightboxも設定されていない想定で合っているでしょうか。
ページ内にdata-groupの設定があるかを確認して、ない場合は別途colorbox設定を行えばできるのではないかと思います。
■data-groupの設定がない(class=”lightbox”をライトボックスの対象にする)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/10/
■グループが複数の場合(data-group=”a”とdata-group=”b”)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/10/index2.html
回答ありがとうございます
面倒くさいことで何度も確認させていただき申し訳ありません
結論は以下の通りですよね
１）１グループ・複数グループでも、上から順に表示する場合は、基本のJS(group指定のみ)
２）１グループで、任意に表示する場合は、以前 冨松さんに作成したJS(data-lightbox指定）
３）複数グループで、任意に表示する場合は、今回作成していただいたJS(data-lightbox・data-group指定）
今回、検討をお願いしたいのは、２）３）をまとめ共通に使えるように１つのJSにならないかということです。そうすれば、以前作成したHPにも適用できると考えています。よろしくお願いします。
もちろん１）２）３）すべてに適用できるJSがベストです。
よしみさん
> １）１グループ・複数グループでも、上から順に表示する場合は、基本のJS(group指定のみ)
> ２）１グループで、任意に表示する場合は、以前 冨松さんに作成したJS(data-lightbox指定）
> ３）複数グループで、任意に表示する場合は、今回作成していただいたJS(data-lightbox・data-group指定）
こちらの3パターンで使える想定でjsファイル修正しました。
■data-groupとdata-lightboxを設定していて、data-groupが複数グループある場合
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/12/
■data-groupとdata-lightboxを設定していて、data-groupが1グループの場合
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/12/index2.html
■data-lightboxのみ設定している場合
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/12/index3.html
■グループを設定しない場合(class=”lightbox”で設定)
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/12/index4.html
各サンプルjsは同じ内容で、HTML上の設定のみ変更しています。
こちらでどうでしょうか。
colorboxを便利に使っていますが、キャプションの文字数が増えると、写真と重なってしまいます。
文字数が増えた場合、自動的に高さを自動調整することはできませんか？
よしみさん
コメントありがとうございます。
オプションだと設定する項目がなさそうなので、やるとしたらCSSを上書きして、高さの固定を解除するくらいしかなさそうな気がします。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/05/
早速の回答ありがとうございます。サンプルurlを見たのですが、まだ、勉強中なので「高さの固定を解除する」ｃｓｓが具体的にわかりません。具体的に教えてください。
ヘッド内CSSの内容が、高さの固定を解除していることはわかりました。
導入してみました １）他の写真も、Titleの上下に一段分ずつ伸びる
２）枠線がなくなる などが起こりますが、改善方法はありますか？
追加で、【ページ数／総ページ数】も非表示にしたいです
冨松義男と申します。
先日は私どもと一緒にHPを作っています吉川亨あてに、画像をファイル名順に並べるサンプルを作って
頂きありがとうございました。これの基づき下記のページを作って見ました。
http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104.html
ただし、上記ページではgroup1,group2のjqueryをコメントアウトの要がありました。
この状態でページを見ると確かにファイル名順に画像は表示されますが、次のような現象も出ます。
・styleのキャプションが表示されない。
・画像のクリックを続けると、最終からはトップの画像に戻らない。
・RWD化していますが、スマホで画像が画面から溢れる。
（コメントアウトしたmaxWidth:’100%’,maxHeight:’100%’が働かなくなっている）
実はこの投稿は2回目になります。初回の投稿の方法がまずく届いていないかもと・・・
失礼の段はお許しください。お忙しいのに申し訳ありません。
冨松義男さん
コメントありがとうございます。
> ただし、上記ページではgroup1,group2のjqueryをコメントアウトの要がありました。
こちらですが、jsを使って以下のような方法でライトボックスを設定しているため、
HTML上で設定されている内容は使用しないようになっています。
そのため、現在設定されているgroup1は特に必要ありません。
① data-lightboxを設定しているaタグから順番と画像を取得
↓
② ①で取得したものを小さい順に並べかえて、HTML上にライトボックスの要素を追加
(非表示にしているため、ブラウザ上からは見えません。)
↓
③ data-lightboxを設定したリンクをクリックすると、②で設定した要素を使ってライトボックスを表示
②で追加した要素に関しては、開発者ツールでご確認いただくと
bodyの閉じタグ直前のdiv内にaタグが追加されているかと思います。
> ・styleのキャプションが表示されない。
> ・RWD化していますが、スマホで画像が画面から溢れる。
（コメントアウトしたmaxWidth:’100%’,maxHeight:’100%’が働かなくなっている）
こちらですが、上記で説明しました通りHTML上で設定いただいているものとは別の方法で設定しているため、
そちらに設定を追加する必要があります。
いただいたサンプルページを参考に設定を追加しましたので、こちらをご確認いただけますでしょうか。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/04/
> ・画像のクリックを続けると、最終からはトップの画像に戻らない。
いただいたサンプルページを拝見すると、body開始タグの直後でiframeにdata-lightbox=”1″が設定されているようです。
そのため、ライトボックスで表示する画像が見つからずにローディングのまま止まっているのかと思います。
何か問題があるようでしたらコメントいただけますと幸いです。
冨松と申します。
colorboxの画像の表示順序を任意に指定する方法を、下記URLでご教示いただきました。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/04/
上記URLを参考にして私どもは下記のページを作って見ました。
・http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104.html
（画像の表示順序を任意に指定する例）
・http://www.shoai.ne.jp/pre/pre-hirakata-s/hirakatasouth/s171104b/s171104-w.html
（画像の表示順序を任意に指定し、かつcolorbox本来の画像表示順序を併用する例）
私どもHPを作るグループの皆で確認しましたが、思い通りのものができたと喜んでいます。
お礼が遅くなってしまったことお許しください。ご指導ありがとうございました。
冨松義男さん
実装のご報告ありがとうございます！
うまく実装できたようでよかったです。
webのポートフォリオを自作しておりまして検索からここに辿り着きました。
少しカスタマイズに苦戦しておりまして少しお聞きしたくコメントしております。
長文すみません。質問コーナーではないのは重々承知ですが
1週間ほど悩んでまして、もしご教授いただけましたら幸いです。
現在サムネからクリックして画像ページ（別URL）をライトボックスで開くようにしたく、
フルスクリーン表示（元のページいっぱいかぎりぎり）にしたいのですがなかなかできず困っております。
optionのdimensionsのinnerWidth、width,initialwidth等を100%にしてもデフォルトのサイズ感？（恐らく）
が元のままでうまくいかずという具合です。
もし迷惑でしたらこのコメント毎削除していただいて構いません。
宜しくお願い致します。
ishigamoriさん
コメントありがとうございます。
フルスクリーン表示ができないというのがよくわからなかったのですが、
例えばオプションのwidthとheightに100%を指定した場合というのは
イメージと異なるということでしょうか。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/02/
もしくは、colorbox.cssのコア部分のみ読み込むようにして、
画像ページではbackground-sizeを使って画像が縦横100%に表示されるように設定しておくと
フルスクリーンのように表示できますが、こういったことでしょうか？
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/03/
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/03/image.html
もし意図されたものと違うようでしたら、コメントいただけますと幸いです。
Lightboxに変えColorboxを愛用しています。素晴らしいソフトと思います。画像をクリックしたときの表示順を、ファイル番号順に変えることはできませんか。現在はソースの記述順になっています。
幾つかの表の中に画像を任意に入れているページがあるのですが、（1枚1枚をクリックして拡大して見る分には問題はないのですが）スライドショー的に見る場合、時系列的に作成したファイル番号順に見せたいのです。よろしくお願い致します。2017-11-15
吉川 亨さん
コメントありがとうございます。
ファイル番号順とは少し違いますが、以下にサンプルをアップしました。
https://cly7796.net/blog/sample/plugin-jquery-colorbox/03/01/
data属性を使って、data-lightboxに表示したい順番を指定するようにしています。
詳しくはコードをご確認いただければと思います。
初めてコメント差し上げます。
callbacks関数のonCompleteが二つになっています。
二つ目の記述をonCleanupに修正よろしくお願いします。
kwhrさん
ご指摘ありがとうございます。
onCleanupの部分を修正いたしました。