colorboxをスマートフォンで表示させるためのカスタマイズ【2021年版】

colorboxがちょうど実務で必要になったのですが、相変わらずスマホ非対応のようなのでググったら、まさかのこの記事が上位に出てきてしまったのでがんばって！！改訂！！しました2021！！！

ちゃんと目次もあります！！（？）

ひとまず最初に…
colorbox以外でも元のlightboxや、fancybox等いろいろありますよね。むしろそちらの方が主流…？？🤔
それらを使うとレスポンシブ調整も必要なかったりもするのですが、どうしてもcolorboxじゃないとダメ！😫というときもあります。
ということで…💁‍♀️

モーダルウィンドウ用jQueryの自分的使い分けポイント

それぞれのモーダルウィンドウの使い勝手を独断と偏見で超絶簡単にまとめてみました！

lightbox

安定のlightbox😊これ使っとけばええやろ！そうやろ！
と思ったら実は画像にしか使えないので、iframeやYoutube埋め込みとかできません😢

fancybox

fancyboxなら画像でもiframeでもいけます！！
画面に収まるサイズのものを表示させるのであればすごく便利！
ならfancyboxでええやん！でも私はデザイン的にはlightboxが一番好き！

colorboxの出番ないかと思うのですが…実はcolorboxだからこそできることが…あります！！

colorbox

画像もiframe等もOKで、なにより縦に長い画像のときにめちゃくちゃ重宝します！！！
モーダルで開いてもスクロールできるのと、次の画像に進んでもちゃんと画像上部から表示してくれます！
これがたしかcolorboxにしかなかったはず…！（他のだと上に戻って表示してくれない）🤗
なので、例えば画面に収まらないような大きい画像や、縦に長い漫画などがかなり見やすく表示できます！
ただしスマホ調整が必要になるのです。。

あとはなんやかんや競合してどうしてもcolorboxを使う必要がある場合とかでしょうか🤔

jQueryがわかれば他のものを編集する手もあるのですが、（私が）できないのでがんばってcolorboxを調整します～～！！🙋‍♀️
ちなみにcolorboxのスクロールをOFFにする場合も簡単なので、最後におまけで紹介します！
それではいざ！

colorboxがスマホで崩れるときの対処法

1.画像の表示サイズが画面に合っていない、変な位置に表示されてしまうとき

画像が表示領域を超えて大きく表示されたり、反対に小さすぎたり、元のページに謎の余白が生まれてしまったり…

そんなときは画像が表示される前の、あのクルクル回ってるやつが出るときのサイズを調整します。
これがスマートフォンの表示幅より大きいと、表示が崩れてしまいます。

下記参考サイト様のコードが便利です！！

<script>
$(document).ready(function(){
    $(".colorbox").colorbox({
      maxWidth:"90%",
      maxHeight:"80%"
    });
});
</script>

HTML側にこのように書くといいみたいです…！神に感謝……です！！🥺🙏

「jquery.colorbox.js」の「initialWidth」と「initialHeight」を触っても同様にできると思います。
でもなるべく元のjsは触らない方がいいですね🤗

initialWidth: "250",
initialHeight: "100",

2.画像が画面からはみ出て、大きく表示されてしまうとき

1で解決しない場合…クルクルではなく画像サイズを画面幅に合わせたい場合等はこちらかもしれません🤔

ずっとお世話になってきた神～～！！🙏🙏
ちなみに画像の高さがブラウザサイズ内になる「maxHeight」を使うと、縦に長い画像の場合は小さくなるためPCで見にくくなってしまいます。
ひとまずは速さもおいて、[]内も適宜変え、下記のように書いてよく使わせていただいてました。

<script>
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%'});
});
</script>

💡書き足していくと記述が増えてゴチャゴチャするので、このmaxWidthはcolorboxのデフォルト追記に合体してみます。

<script>
$(document).ready(function(){
	$(".group1").colorbox({rel:'group1', maxWidth:'100%'});
	$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390, maxWidth:'100%'});　//YouTubeの場合の例
});
</script>

3.タイトルが長くてはみ出してしまうとき

画像と一緒に表示されるテキストはaタグの「title」に書く部分ですが、ここの文字数が多いとスマホ表示では入りきらないこともあります。

この場合は「colorbox.css」を修正します。
まずは画像下の余白を広げます。

#cboxLoadedContent{
margin-bottom:28px;
}
↓
#cboxLoadedContent{
margin-bottom:100px;
}

ボタンの位置も変えましょう。
「#cboxPrevious」「#cboxNext」「#cboxClose」を

bottom:0;
↓
bottom:70px;

のように変更します。

長すぎると短い文章のときに少し不格好ですが…😅
ひとまずこれで全文おさめることができそうです！

おまけ・colorboxでモーダル表示時にスクロールをOFFにする

colorboxはデフォルトではスクロールがONになっているのも特徴ですが、OFFにすることも可能です！
ここにも神がいらした…😌🙏

下記は『iframe表示時にclass「wrapper」を縦スクロールさせない』場合の例です。
HTML側のjQueryに書き加えます。

同時にHTMLでコンテンツを「wrapper」で囲む必要がありますので、合わせて使うと無事上手くいきました！
class名等は適宜ご変更ください。

<script>
	$(document).ready(function(){
		//Examples of how to assign the Colorbox event to elements
		$(".iframe").colorbox({
          iframe:true, 
          width:"90%", 
          height:"80%",

          onOpen:function(){ current_scrollY = $( window ).scrollTop();
          $( '.wrapper' ).css( {
            position: 'fixed',
            width: '100%',
            top: -1 * current_scrollY
          } ); },
          onClosed:function(){ $( '.wrapper' ).attr( { style: '' } );$( 'html, body' ).prop( { scrollTop: current_scrollY } ); }
        });
	});
</script>

2.のように「maxWidth」にしてもいい…んですかね…？？🤔
検証されてください🤗（ブン投げ）