jQueryプラグイン「Colorbox」をレスポンシブ化する

jQueryプラグイン「Colorbox」をレスポンシブ対応するための方法です。

「Colorbox」は、記事中の画像を簡単にポップアップ表示させることができる、モーダルウインドウプラグインです。



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

$(document).ready(function(){

$(".colorbox").colorbox({

maxWidth:"90%",

maxHeight:"90%"

});

</script>

上記のように、「 maxWidth」「 maxHeight」を指定することで、スマートフォンなどのモバイル端末で閲覧した時に画像が画面からはみ出てしまうのを防げます。

これで、Colorbox をレスポンシブ化にすることができます。