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

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

希望する動作に使えそうな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を利用している。やっぱり多くの人が使っているものは理にかなっているし、こっちの方が断然便利だ。

さらに追記
なんのかんのと管理がめんどうなので、普通のリンクにした。シンプルなソースのまま使えるものを見つけたら使ってみたい。

さらにさらに追記
現在は「Zooming」を使用中。スマホではデフォルトで画面幅いっぱいに表示しているので、拡大機能はほとんど意味がない状態になっているけれど。 使用中のCSSとバッティングする箇所があり、少し苦戦したけどなんとか対応できた。
でも、こういう方法も悪くはないんじゃあないかなと思い直したので、ここに書いている機能はこのページでのみ有効にしている。

最近は表示している画像と拡大したい画像は別にすることが多いので、リンク先のファイルを取得して表示するようにすれば良いと思うけれど、めんどくさそうなので手付かず。やっぱりこういうのは多くの人が使っているものを使うのが良いと思う。

参考サイト

Update:

Tips

Text by pushman