スマホで大きな画像を見せる方法を模索
はみ出した画像を非表示にして、フリック(スクロール)で動かせるようにする

スマートフォンでサイトを見ていると、大きな画像の扱いがどうもしっくりこない。画面の幅いっぱいに表示させているサイトがほとんどだが、それでもやっぱり小さい。ピンチして拡大することもできるが、スマートではない気がする。スマホはやはり片手で操作したい。
自分のサイトをリニューアルしているうちに、「表示領域はそのままで画像だけ拡大して、フリックで動かせるようにすれば便利じゃないかな」と思ったので、久しぶりに情報をかき集めて試行錯誤してみた。

希望する動作に使えそうなjQueryのプラグインやJavaScriptのコードも試してみたが、どうも期待したようには動いてくれない。こういう動作を望んでいる人は自分以外にいないのか、なかなか情報が集まらないので久しぶりにゴリゴリコードを書いてなんとか実現できた。

「荒木飛呂彦原画展 冒険の波紋」ポスター
本文とは全く関係ないが、「荒木飛呂彦原画展 JOJO 冒険の波紋」のポスター。

PCの場合はマウスオーバさせるとカーソルが「ズームできますよ」というものに変わり、タブレット、スマホの場合(ウィンドウ幅が834px以下)は画像の上に「画像をタップで拡大」と表示させている。
拡大させるとPCの場合はカーソルが「移動できますよ」というものに変わり、タブレット、スマホの場合は画像の上に「フリックで移動」と表示させている。

やっていることは単純で、画像がクリックされたらその画像の幅と高さをjQueryで取得し、同じサイズのdivを生成して、元の画像を内包させる。元の画像はオリジナルサイズで表示し、生成したdivからはみ出す部分は非表示にしてスクロールできるようにする。
それぞれのコードは以下の通り。

HTML

jQuery

画像に「active」というclassを付与しているが、これは「wrap」をtoggleさせるためだけに使用しているので、理解が深い人なら不要かもしれない。

CSS

画像を拡大した時に「画像をタップで拡大」と表示し続けるのも気持ちが悪いので、z-indexで拡大しているときは見えないように重なりを調整している。
オリジナルの画像サイズが生成したdivよりも小さい場合、縮小させたような表示になるので「min-width: 100%;」として、最小でも生成したdivの幅は保つようにしている。

スタイルシートで「overflow: auto;」とすると、はみ出している時にスクロールできるようになるが、スクロールバーも表示されるので、MSのブラウザは「-ms-overflow-style: none;」、SafariとChromeは「::-webkit-scrollbar」という擬似要素に「display: none;」として非表示にしている。Firefoxではスクロールバーを消せないようなので諦めた。

画像の中心から拡大しているように見せたかったのだが、absoluteとmarginを使って中央に表示させようとすると、見えない領域ができてしまう。「text-align: center;」などいろいろ試して足掻いてみたが、どうしても中心から拡大できないのでこれも諦めた。

モヤモヤしている点が2つほど残っているが、概ね想像した通りの動きができて満足している。

追記:
自分で考えた仕組みなので結構気に入っていたけれど、現在はPhotoSwipeを利用している。やっぱり多くの人が使っているものは理にかなっているし、こっちの方が断然便利だ。

Update:

Tips

Text by pushman