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

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

デザオ
よく見かけますー
デザコト
簡単に実装できますよー

【実装】Elastic Transition（デフォルト）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

CSS

/* ===== ギャラリー（サムネイルを3つ並べる） ===== */
.gallery_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.gallery_area div {
  width: 32.5%;
  margin-bottom: 1.25%;
}
.gallery_area div a {
  display: block;
  transition-duration: 0.3s;
}
.gallery_area div a:hover {
  opacity: .7;
  cursor: zoom-in;
}
.gallery_area div a img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 4px;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".group1").colorbox({rel:'group1', maxWidth:"90%", maxHeight:"90%"});
});
見本ページをひらく（Elastic Transition）

【実装】Fade Transition（ふわっと変わる）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area">
  <div><a class="group2" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group2" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group2" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

CSS

/* ===== ギャラリー（サムネイルを3つ並べる） ===== */
.gallery_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.gallery_area div {
  width: 32.5%;
  margin-bottom: 1.25%;
}
.gallery_area div a {
  display: block;
  transition-duration: 0.3s;
}
.gallery_area div a:hover {
  opacity: .7;
  cursor: zoom-in;
}
.gallery_area div a img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 4px;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".group2").colorbox({rel:'group2', maxWidth:"90%", maxHeight:"90%", transition:"fade"});
});
見本ページをひらく（Fade Transition）

【実装】Slideshow（スライドショー、自動再生、停止ボタンもある）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area">
  <div><a class="group3" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group3" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group3" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

CSS

/* ===== ギャラリー（サムネイルを3つ並べる） ===== */
.gallery_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.gallery_area div {
  width: 32.5%;
  margin-bottom: 1.25%;
}
.gallery_area div a {
  display: block;
  transition-duration: 0.3s;
}
.gallery_area div a:hover {
  opacity: .7;
  cursor: zoom-in;
}
.gallery_area div a img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 4px;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".group3").colorbox({rel:'group3', maxWidth:"90%", maxHeight:"90%", slideshow:true});
});
見本ページをひらく（Slideshow）

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

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area">
  <div><a class="group4" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group4" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group4" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

CSS

/* ===== ギャラリー（サムネイルを3つ並べる） ===== */
.gallery_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.gallery_area div {
  width: 32.5%;
  margin-bottom: 1.25%;
}
.gallery_area div a {
  display: block;
  transition-duration: 0.3s;
}
.gallery_area div a:hover {
  opacity: .7;
  cursor: zoom-in;
}
.gallery_area div a img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 4px;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".group4").colorbox({rel:'group4', maxWidth:"90%", maxHeight:"90%", current:'{current} / {total}', opacity:1});
});
見本ページをひらく（currentとopacityをカスタムする）

【実装】YouTube

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area_one">
  <div><a class="youtube" href="//www.youtube.com/embed/VGdlkVNffC4?rel=0&amp;wmode=transparent" title="音のない世界聞こえますか僕らの世界">動画をひらく（YouTube）</a></div>
</div>

CSS

/* ===== ひらくリンク（見本の箱。ただのリンクでも動きます） ===== */
.gallery_area_one {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.gallery_area_one a {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #2b2a27;
  border-radius: 999px;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  transition: .3s;
}
.gallery_area_one a:hover {
  background: #2b2a27;
  color: #fff;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:360, maxWidth:"90%", maxHeight:"90%"});
});
見本ページをひらく（YouTube）

【実装】Vimeo

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area_one">
  <div><a class="vimeo" href="//player.vimeo.com/video/390919309" title="いつかのこと">動画をひらく（Vimeo）</a></div>
</div>

CSS

/* ===== ひらくリンク（見本の箱。ただのリンクでも動きます） ===== */
.gallery_area_one {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.gallery_area_one a {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #2b2a27;
  border-radius: 999px;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  transition: .3s;
}
.gallery_area_one a:hover {
  background: #2b2a27;
  color: #fff;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".vimeo").colorbox({iframe:true, innerWidth:640, innerHeight:360, maxWidth:"90%", maxHeight:"90%"});
});
見本ページをひらく（Vimeo）

【実装】Iframe

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area_one">
  <div><a class="iframe" href="https://125naroom.com/" title="125naroom">ページをひらく（Iframe）</a></div>
</div>

CSS

/* ===== ひらくリンク（見本の箱。ただのリンクでも動きます） ===== */
.gallery_area_one {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.gallery_area_one a {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #2b2a27;
  border-radius: 999px;
  color: #2b2a27;
  font-size: 14px;
  text-decoration: none;
  transition: .3s;
}
.gallery_area_one a:hover {
  background: #2b2a27;
  color: #fff;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});
見本ページをひらく（Iframe）

【実装】タッチデバイスでスワイプもできるようカスタムする

コードを見る（HTML・CSS・jQuery）

HTML

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

CSS

/* ===== ギャラリー（サムネイルを3つ並べる） ===== */
.gallery_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
}
.gallery_area div {
  width: 32.5%;
  margin-bottom: 1.25%;
}
.gallery_area div a {
  display: block;
  transition-duration: 0.3s;
}
.gallery_area div a:hover {
  opacity: .7;
  cursor: zoom-in;
}
.gallery_area div a img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 4px;
}

/* 動きを減らす設定のとき（Colorbox の動きは <script> の $.fx.off で止める） */
@media (prefers-reduced-motion: reduce) {
  .gallery_area div a, .gallery_area_one a { transition: none; }
}

jQuery

$(function () {
  // 動きを減らす設定のときは、jQuery の動きを止める
  $.fx.off = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $(".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/3.7.1/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/common/img/slide01.svg" title="Photo 1">Photo 1</a></div>
<div><a class="group1" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2">Photo 2</a></div>
<div><a class="group1" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3">Photo 3</a></div>

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

<div class="gallery_area">
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide01.svg" title="Photo 1"><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="Photo 1"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide02.svg" title="Photo 2"><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="Photo 2"></a></div>
  <div><a class="group1" href="https://125naroom.com/demo/common/img/slide03.svg" title="Photo 3"><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="Photo 3"></a></div>
</div>

jQuery

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

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

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

$(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』の実装サンプル集
デザインのメモ 2024.7.8

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。