京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

すっかりご無沙汰になっております。
ニシザワです。

baserCMSで最近はホームページを作らせて頂いています。
タイトル通り久しぶりにbaserの記事を書きます。

baserCMSにはColorBoxがデフォで入っています。
しかし、レスポンシブに対応していないためレスポンシブデザインでテーマを作成するときは
すこし、オプションを変えなければいけません。

今回はそのコードをご紹介します。
[theme_name]/Blog/default/以下のファイルの最初に下記のようなコードがあります。

<script type="text/javascript">
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade"});
});
</script>

  これを下記のように変更します。

<script type="text/javascript">
$(function(){
if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade",maxWidth:'100%'});
});
        
$(window).resize(function(){
    $.colorbox.resize({width:'100%'});
});
</script>
 

あとはCSSで整えて

#cboxLoadedContent,img{
        width: 100%;
}

こちらで完了です。
これでColorboxがレスポンシブ対応になりました。

因みに弊社のサイトもレスポンシブですがまだ、Colorboxは対応していません。。。
もうすぐホームページをリニューアルするのでその時にでも。。。

それではありがとうございました。