前回の記事の続きなんですが・・・
この度メインサイトのPCテンプレートをスマートフォン最適化を行いまして、そこで一日悩みあげたことを備忘録も兼ねて記事にしたいと思います。

写真をブワッと拡大表示する lightbox ですが、スマートフォンに対応しているものは意外と少ないです。
スマートフォン最適化する前は軽かったので、jQuery.lightbox を採用していました。
しかし、スマートフォンで表示させると明後日の方向に拡大表示されてしまいます。

制作者サイトのデモでも同じようになりますので、大元が対応していないことがわかります。
検索してもカスタマイズ方法は全くありません・・・困りました。

lightbox のスマートフォン表示を調べていくうちに、対応している jQuery が見つかりました。
何と、EC-CUBE 2.13 から（？）標準設置されている Colorbox がスマートフォンサイトには一番いいとあるではないですか！

さすが、EC-CUBE！！さすがロックオンさん！！！
すぐに EC-CUBE のデモでチェックです！！

・・・アレ？・・・なんか対応しきれてないぞ・・・
相変わらずスマートフォンのテンプレートは 手抜き 手が回らないほど忙しいようで、Colorbox の良さが生かし切れてません。

そこからが、苦悩の時間でした。
いくら検索をしても、軽くてスマートフォンに対応しているからこれしかないね！的な記事しか引っかかりません。
うちの iPhone には対応してくれないのに・・・

調べたら、maxWidht:'100%',maxHeight:'100%' （参考記事：kagzugiの備忘録 様）でスマートフォンに最適化できるらしいということがわかり、早速設置・・・・・・・・結果はダメ・・・・拡大場所が明らかにおかしい・・・

その後、四苦八苦して分かったことが、一旦横画面にしてから拡大すると、指定の位置に拡大表示されるということ、オプションで fixed:true としてやると固定位置だけどうまく表示されるということ。

しかし、fixed:true だとさらに拡大することができず、いろいろと不便です。
もう手詰まり。
本当に困って 、どなたかかっこいいお兄さんが助けてくれるんじゃないかと淡い期待を抱いて、Facebook でつぶやいてみました・・・


結果：いいね！0、コメント 0


あちゃー・・・ですよ、一旦はこの時にあっさりあきらめましたね。
しかし翌日、やっぱり気になってあれじゃないこれじゃないと試してみたところ、解決策がついに見つかりました！！！！！！！

それは・・・ top:true ・・・です。

maxWidht:'100%',maxHeight:'100%',top:true とすることで、スマートフォンでも（真ん中じゃないですが）問題なく表示できました！！！！

------