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

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

Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。
簡単に実装することができるのでおすすめです。
(個人的には『PhotoSwipe』をおすすめしますが、jQueryではないので実装するのが少々難しかったりします。なので簡単設計がお好みでしたら『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
returnFocusColorboxが閉じた時にフォーカスtrue
trapFocusキーボードフォーカスはColorboxのナビゲーションとコンテンツに限定true
fastIframeiframeのコンテンツが完全に読み込まれるまでローディング画像の削除とonCompleteイベントの遅延true
preloadingグループ内の前後コンテンツのプリロードtrue
overlayClose背景オーバーレイをクリックでColorBoxを閉じるtrue
escKeyescキーを押してColorBoxを閉じるtrue
arrowKeyColorboxグループ表示時のキーボードナビゲーション操作true
loopループ設定true
dataajaxリクエストでGET値またはPOST値を送信false
classNameColorboxと背景オーバーレイにクラス付加false
fadeOutColorboxが閉じる際のフェードアウト時間300
closeButton閉じるボタンの表示true

下記ページにその他のオプション内容と設定方法が詳細に載っています。
(英語ページですが日本語翻訳すれば問題ないかと思われますー)

Colorbox – a jQuery lightbox

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
さーて来週のサザエさんは?
きのこさん
マスオさん大活躍らしいですよー

関連記事

【jQuery】slick を使ってスライドショー(横幅いっぱい+前後のスライドを半透明にする)

【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集

デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう