freoの画像表示でColorBoxを画面からはみ出さないよう設定するには

2013/02/20 17:57更新
カテゴリー：Colorbox
タグ：freo画像

freoでは画像の拡大表示にColorBoxを使用していますが、レスポンシブに対応していないので画像が大きすぎると画面からはみ出てしまいます。
レスポンシブに対応した FancyBox2とかを導入してもいいと思うのですが、もっと簡単にColorBoxで表示できる範囲を設定する方法を紹介します。

js/admin.js、js/default.js、js/iframe.js（PC用）、js/iphone/common.js（iPhone用）をエディタで開き、各ファイルにある

$(target).colorbox();

の部分を、

$(target).colorbox({maxHeight:"90%"});

に変更（赤字を追加）します。

【2013/2/20追記】※縦横両方指定すると縮小比率がおかしな画像表示になるので、縦だけ縮小で指定して下さい。

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

freoをカタカナ3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

freoカスタマイズ集