はみ出した画像をフリック、またはスクロールで表示
スマホで画像を拡大する方法を模索

スマートフォンでサイトを閲覧していると、画像が小さくて目が疲れる。ピンチして拡大することもできるが、スマートではない気がする。スマホはやはり片手で操作したい。
自分のサイトをリニューアルしている時に、表示領域はそのままで画像だけを拡大し、フリックして見たい箇所に移動できるようにすれば便利そう、なんとなくおもしろそうだと思ったので、久しぶりに情報をかき集めて試行錯誤してみた。

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

「荒木飛呂彦原画展 冒険の波紋」ポスター

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つほど残っているが、概ね想像した通りの動きができて満足している。

Web

Text by pushman