ホーム
技術ブログ
jquery.colorboxが動作しないときに確認するコト

技術ブログ

2022年08月16日

[jQuery]
jquery.colorboxが動作しないときに確認するコト

colorboxはjQueryで動作する、簡単にモーダルウィンドウを実装できるプラグインです。
超軽量、設置が簡単ということで古くから使用されていますが、jQueryの3系でも動作するのでいまだ現役で使っている方も多いのではないでしょうか。
古いソースをいじっていたらハマってしまい、約半日潰してしまったので記事にしておきます。

colorboxの設置方法

colorboxの設置方法は非常に簡単です。
まず公式からファイルをダウンロードし、jQuery、colorboxの順に読み込ませます。

Colorbox - a jQuery lightbox

https://www.jacklmoore.com/colorbox/

<head>
・・・・
<link rel="stylesheet" href="colorbox.css">　/* 必要に応じてcolorbox.cssを読み込む。画像なども設置する */
・・・・
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> /* 外部読み込みの場合 */
<script src="/js/jquery.colorbox-min.js"></script> /* 設置した場所までのパス */
・・・・
<script>
$(function() {
    $(".pic").colorbox({
        maxWidth:"90%",
        maxHeight:"90%"
    });
});
</script>
</head>
<body>
・・・・
<a class="pic" href="/01.jpg">
    <img src="/thum01.jpg" alt="" />
</a>
・・・・・

設置方法について詳しくは端折りますが、基本的にはjQueryとcolorboxを読み込み、何をcolorboxで動かすか指定するだけなので非常に簡単です。
CSSは読み込まなくても問題ありませんが、閉じる画像などを表示させたい場合などに読み込ませたほうが良いかもしれません。

上記の例は、画像（thum01.jpg）をクリックするとaタグのhrefで指定されている画像（01.jpg）がモーダルウィンドウで表示される例ですが、colorboxにはこの他にもいくつか表示させる方法があります。

スライドショー

$(function() {
    $(".slide").colorbox({
        rel:'group1',
        slideshow:true,
        maxWidth:"90%",
        maxHeight:"90%",
    });
});

<a class="slide" href="/01.jpg" title="画像タイトル1">
    <img src="/thum01.jpg" alt="" />
</a>
<a class="slide" href="/02.jpg" title="画像タイトル2">
    <img src="/thum02.jpg" alt="" />
</a>
<a class="slide" href="/03.jpg" title="画像タイトル3">
    <img src="/thumb03.jpg" alt="" />
</a>

relでグループ化して、各画像をスライド表示させます。

インラインHTML

$(function() {
    $(".inline").colorbox({
        inline:true,
        maxWidth:"90%",
        maxHeight:"90%",
    });
});

<a class="inline" href="#modal">
ここをクリック！
</a>

<div style="display: none;">
    <div id="modal">
        <p>ここがモーダル表示される！</p>
    </div>
</div>

ページ内に記述している一部をモーダルウィンドウで表示させることができます。
hrefで表示させたいエリアをidで指定し、その外側の親要素をdisplay:noneで非表示にさせておくのがポイントです。

iframe

$(function() {
    $(".iframe").colorbox({
        iframe:true,
        width:"50%",
        height:"90%",
    });
});

<a class="iframe" href="https://tti-co.com/company/">会社概要</a>

iframeで、他のHTMLページを組み込んでモーダル表示させることができます。

この他にもAjax表示に対応していたり、オプションも豊富にありますので、公式ページをご確認ください。

Colorbox - a jQuery lightbox

https://www.jacklmoore.com/colorbox/

colorboxがうまく動作しないとき

ここからが本題になります。
非常に簡単に設置できるために、逆に動作しないと解決に非常に時間がかかります。

jsファイルの読み込み順、呼び出し方は正しいか。
呼び出し方は、下記の通り
$(selector).colorbox({key:value, key:value, key:value});
の書式で、キーと値はカンマ区切りで複数設置が可能です。
他のjQueryライブラリとバッティングしていないか、jQueryでエラーが起きていないか。

1も含め、これらはブラウザの開発者ツールなどで確認できます。おかしいなと思ったら開発者ツールを確認してみましょう。
正常に動作している状態であれば、ロード後に</body>直前に#cboxOverlay、#colorboxが生成されます。
id要素の指定がバッティングしていないか。

実はこれを書くための延々使い方などの説明でした。
インラインHTMLを表示させる場合に限った話ですが、id要素で表示エリアを指定します。
そのためスムーススクロール（クリックするとその位置までゆっくり移動するJS）など、aタグのid要素へのリンクがクリックされたら〜する、という他のJSとバッティングすることがあります。

インラインHTMLを表示させるとき、スムーススクロールとバッティングしないようにするには

スムーススクロールさせるJS、jquery.smoothScroll.js

GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.

A lightweight script to animate scrolling to anchor links. -…

https://github.com/cferdinandi/smooth-scroll

の場合は、スムーススクロールしないようにさせる
data-tor-smoothScroll="noSmooth"
が準備されているようです。
<a class="inline" href="#modal" data-tor-smoothScroll="noSmooth">
のように指定すればOKです。

一方、自分でスムーススクロールを指定している場合、

$(function(){
    $('a[href^="#"]').on('click',function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});

こんな感じの書き方をしているのではないかと思いますが、要素指定する箇所で該当の要素を除く方法を取ることで回避できます。

上記の

<a class="inline" href="#modal">
ここをクリック！
</a>

<div style="display: none;">
    <div id="modal">
        <p>ここがモーダル表示される！</p>
    </div>
</div>

のように記述している場合であれば、

$(function(){
    $('a[href^="#"]:not(.inline)').on('click',function(){
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});

のように、aタグに否定疑似クラス:not(.inline)を適用することで.inlineをクリックしたときはモーダル表示、それ以外はスムーススクロールさせることが可能になります。