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&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の使い方
ダウンロードファイルの中で必要なファイルは以下の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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
さーて来週のサザエさんは？
マスオさん大活躍らしいですよー
