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

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


もくじ(実装サンプル)
1. Elastic Transition(デフォルト)
See the Pen
【jQuery】Lightbox系プラグイン『Colorbox』の実装サンプル / Elastic Transition(デフォルト) by 125naroom (@125naroom)
on CodePen.
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
<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
<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
<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
<div class="gallery_area_one"> <div><a class="youtube" href="//www.youtube.com/embed/VGdlkVNffC4?rel=0&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
<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
<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
<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の使い方
ダウンロードファイルの中で必要なファイルは以下の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 |
下記ページにその他のオプション内容と設定方法が詳細に載っています。
(英語ページですが日本語翻訳すれば問題ないかと思われますー)
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに


関連記事
おすすめ
かんれん
- web / 2019.4.8
- 【CSS】ホバーエフェクト実装サンプル集(画像編)
- web / 2021.3.30
- 【CSS】シンプルなボタンデザイン実装サンプル集
- web / 2020.1.8
- 【CSS】Flexboxの使い方と実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.09.29New
- センダイパルコ15th | 仙台PARCO
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。