【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集

2019.12.6
jQuery

Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。
簡単に実装することができるのでおすすめです。
（個人的には『PhotoSwipe』をおすすめしますが、jQueryではないので実装するのが少々難しかったりします。なので簡単設計がお好みでしたら『Colorbox』をおすすめします。）

よく見かけますー

簡単に実装できますよー

もくじ（実装サンプル）

Elastic Transition（デフォルト）
Fade Transition（ふわっと変わる）
Slideshow（スライドショー、自動再生、停止ボタンもある）
current（合計枚数と現在の位置の表示内容）とopacity（背景の透明度）をカスタムする
YouTube
Vimeo
Iframe
タッチデバイスでスワイプもできるようカスタムする

もくじ（使い方）

Colorboxのダウンロード
Colorboxの使い方
オプション設定
メモ
さいごに

1. Elastic Transition（デフォルト）

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / Elastic Transition（デフォルト） by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

$(document).ready(function(){
  $(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"});
});

サンプルページはこちら

2. Fade Transition（ふわっと変わる）

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / Fade Transition（ふわっと変わる） by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area">
  <div><a class="group2" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group2" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group2" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

$(document).ready(function(){
  $(".group2").colorbox({rel:'group2', maxWidth:"90%", maxHeight:"90%", transition:"fade"});
});

サンプルページはこちら

3. Slideshow（スライドショー、自動再生、停止ボタンもある）

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル /Slideshow（スライドショー、自動再生、停止ボタンもある） by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area">
  <div><a class="group3" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group3" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group3" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

$(document).ready(function(){
  $(".group3").colorbox({rel:'group3', maxWidth:"90%", maxHeight:"90%", slideshow:true});
});

サンプルページはこちら

4. current（合計枚数と現在の位置の表示内容）とopacity（背景の透明度）をカスタムする

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル /current（合計枚数と現在の位置の表示内容）とopacity（背景の透明度）をカスタムする by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area">
  <div><a class="group4" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group4" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group4" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

$(document).ready(function(){
  $(".group4").colorbox({rel:'group4', maxWidth:"90%", maxHeight:"90%", current:'{current} / {total}', opacity:1});
});

サンプルページはこちら

5. YouTube

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / YouTube by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area_one">
  <div><a class="youtube" href="//www.youtube.com/embed/VGdlkVNffC4?rel=0&amp;wmode=transparent" title="音のない世界聞こえますか僕らの世界">Flash / Video (Iframe/Direct Link To YouTube)</a></div>
</div>

jQuery

$(document).ready(function(){
  $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:360, maxWidth:"90%", maxHeight:"90%"});
});

サンプルページはこちら

6. Vimeo

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / Vimeo by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area_one">
  <div><a class="vimeo" href="//player.vimeo.com/video/87861691" title="ウィンターランド - winterland">Flash / Video (Iframe/Direct Link To Vimeo)</a></div>
</div>

jQuery

$(document).ready(function(){
  $(".vimeo").colorbox({iframe:true, innerWidth:640, innerHeight:360, maxWidth:"90%", maxHeight:"90%"});
});

サンプルページはこちら

7. Iframe

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / Iframe by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="gallery_area_one">
  <div><a class="iframe" href="https://125naroom.com/">Outside Webpage (Iframe)</a></div>
</div>

jQuery

$(document).ready(function(){
  $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});

サンプルページはこちら

8. タッチデバイスでスワイプもできるようカスタムする

See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / タッチデバイスでスワイプもできるようカスタムする by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

$(document).ready(function(){
  $(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"});

  //swipe
  $("#colorbox").swipe({
    swipeLeft:function(){
      $.colorbox.next()
    },
    swipeRight:function(){
      $.colorbox.prev()
    },
    threshold:0
  })
});

サンプルページはこちら

Colorboxのダウンロード

まずはColorboxに必要なファイルを下記サイトからダウンロードします。

Colorbox – a jQuery lightbox

Colorboxの使い方

ダウンロードファイルの中で必要なファイルは以下の2点です。

colorbox.css
jquery.colorbox-min.js

HTML

<link rel="stylesheet" type="text/css" href="css/colorbox.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>

CDNを使う場合は、

<link rel="stylesheet" type="text/css" href="css/colorbox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

HTML

基本的な書き方。

<div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1">Photo 1</a></div>
<div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2">Photo 2</a></div>
<div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3">Photo 3</a></div>

テキストではなく画像にするなら。

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" title="Photo 1"><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" title="Photo 2"><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" title="Photo 3"><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="Photo 3"></a></div>
</div>

jQuery

デフォルトはこれだけでOKです。

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

レスポンシブにするなら。

$(document).ready(function(){
  $(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"});
});

オプション設定

オプション	説明	初期値
transition	トランジション効果。elastic（伸縮）、fade（フェード）、none（なし）	“elastic”
speed	トランジションの速度（ミリ秒）	350
href	画像やフォームボタンなどの非リンク要素に代替のURLを関連付け	false
title	固定タイトル	false
rel	複数のColorboxの表示対象をグループ化	false
scalePhotos	ウィンドウサイズに合わせて自動調整。幅と高さはmaxWidth、maxHeight、innerWidth、innerHeight、width、heightで指定	true
scrolling	オーバーフロー時のコンテンツのスクロールバーの表示	true
opacity	背景オーバーレイの透明度（0～1）	0.85
open	ロード時に即時展開	false
returnFocus	Colorboxが閉じた時にフォーカス	true
trapFocus	キーボードフォーカスはColorboxのナビゲーションとコンテンツに限定	true
fastIframe	iframeのコンテンツが完全に読み込まれるまでローディング画像の削除とonCompleteイベントの遅延	true
preloading	グループ内の前後コンテンツのプリロード	true
overlayClose	背景オーバーレイをクリックでColorBoxを閉じる	true
escKey	escキーを押してColorBoxを閉じる	true
arrowKey	Colorboxグループ表示時のキーボードナビゲーション操作	true
loop	ループ設定	true
data	ajaxリクエストでGET値またはPOST値を送信	false
className	Colorboxと背景オーバーレイにクラス付加	false
fadeOut	Colorboxが閉じる際のフェードアウト時間	300
closeButton	閉じるボタンの表示	true