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

絵描きさんは絵を描く休憩に絵を描くっていうけどサイト作る休憩にサイトを作るという暴挙（
レスポンシブむつかしかったんや…パソコン用から完成させるね

さて、このサイトでは、画像の拡大表示に「colorbox」を使用させていただいております。
※現在未使用です。

今回休憩にサイトのスマートフォン対応を進めているんですが、colorboxをPCと同じに使っていると
画像が超でかくなったり、変な位置に表示されたり、背景（拡大したとき暗くなるとこ）の下に表示されたりしちゃいます。

　

そこで回避策を実行しました。
一部無理やりで正しいのかわからないけどｗメモしておきます！

パソコンと同じhtmlを使う場合でjsやメディアクエリなんかを使って振り分けている想定です。
jsは詳しくないのもあり(＾q＾)ここは省略します！

あとcolorboxのデザインはデフォルトで、実機検証はiPhone5です。

「スマートフォンの場合colorboxを使用させない」という手もあるかと思いますがむつかしくてできませんでした(＾q＾(＾q＾(＾q＾笑

それでは回避策です。

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

「jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う」（kagzugiの備忘録 様）

にあるソースをお借りします。

ちなみに画像の高さがブラウザサイズ内になる「maxHeight」を使うと、縦に長いイラストが小さくなり、このサイトの場合PCで見にくくなっちゃいます。twitterみたいに

ひとまずは速さもおいて、[]内も適宜変え、下記のように書きました。

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

これで画像がスマートフォンでも見やすいサイズになりました。

2.変な位置に表示されてしまう

サイズはなおったけど
表示領域を超えていたり、それで逆に画像が小さくなりすぎたり
ページが全面に表示されなかったり…

そういうときは「jquery.colorbox.js」を触ります。

このjs内の「initialWidth」と「initialHeight」は画像が表示される前、あのクルクル回ってるやつが出るときのサイズです。

これが600とかスマートフォンの幅より大きいと、
変な表示になってしまいます。ですので

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

としてみました。

iphone5できれいに表示されました。

これで表示領域を超えてしまうことはなくなります。

ちなみに、1でおいておいた速さですがここで「speed」の数値を変えても反映されるのかな…？
検証はしてません(X3_ヽ)_

3.画像が背景の下に表示されてしまう

2でうまくいかない場合も活用できます。

「スマートフォン（android・iPhone）に告ぐ！Lightbox 表示したければ、jquery.colorbox.js だ！！」
（BLUE STYLE LOG 様）

を参考にさせていただきました。

1のソースに書き足します。

<script type="text/javascript">
$(function() {
$('a[class^=group1]').colorbox({maxWidth:'100%',top:true});
});
</script>

これで通常通り背景の上、中央に表示されます。

が、記事の通り、画像表示位置は上部に固定されてしまいます。

スマートフォンだけならしょうがないかな…と思いましたが、そういえばPCと共用のソースでした。

head内のjsなので、cssでの振り分けはできません。
振り分けるjs、書けません笑

そこで強行策です。
スマートフォンではもう背景を消してしまいましょう！笑

z-indexとかやってみたけどちょっと違うのかなあって…
背景がなければ潜ることもできなくなるだろうふははは

触るのは「colorbox.css」です。
メディアクエリを使えば、スマートフォンのみで適用できます。

#cboxOverlay{
background:url(images/overlay.png) repeat 0 0;
}
↓
#cboxOverlay{
background:none;
}

これで背景は非表示になります。

デザイン的にはおしい感じになるけど画面いっぱいに画像が表示されるスマートフォンなら
背景なくてもまあいいかなあと思いました。

※今回変更したcolorboxのjs、css以外をアップして公開してみたところ、上記2、3の現象は起きませんでした。
どっかへんな書き方してたのかな…
ということで変更部分は、以下のおまけと2の「initialWidth」と「initialHeight」の数値
（不具合はないが表示がずれていて気になったので）のみです。
（2015.5.1追記）

おまけ
長いタイトルを全文表示させる

　

画像の下に表示されるテキスト、hrefの「title」に書いてる部分ですが、私のサイトをスマートフォンで見ると最大3行になるようです。

でも1行しかちゃんと読めなかったりボタンの下に隠れてしまったり…
そんなときは4と同じく「colorbox.css」を修正します。

まずは画像下の余白を広げます。

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

ボタンの位置も変えましょう。

「#cboxPrevious」「#cboxNext」「#cboxClose」の

bottom:0;
↓
bottom:70px;

これで短いテキストだと、デザイン的には残念な感じになるけど笑
長いテキストも読めるようになりました。

以上、「スマホ？スマフォ？わかんないからスマートフォンって書こう」
間違えました、「colorboxをスマートフォンで表示させるためのカスタマイズ」でした。
参考サイト様方、本当にありがとうございます！

ちなみに「colorbox.css」でのid名はもしかしたら変わってたりするかもなので念のためデベロッパーツールなどで確認してみると良いかと思います！

ああ～～マルチデバイスススススｓ