なんにもない日の頭の中はこんなもんだったりする

【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
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

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

Colorbox – a jQuery lightbox

メモ

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

jQuery日本語リファレンス

jQuery(英語版)

さいごに

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

関連記事

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

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

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ウェブ、のーと
「ÉHON INC.」はオーダーメイド絵本ギフトサービスです
1月21日
1月20日