ちょっと為になる話。
モーダルウィンドウの活用
ポップアップとかlightboxとか色々言ったりするけど、要するに、ページ内に設置した画像は小さいので拡大表示するための手法がある。リンク元をクリックしたら大判のあれこれが表示されるやつ。
文章込みのもので考えると、ページ内に掲載すると長くなってだるく見えるので、一部のコンテンツをポップアップ表示させることで、興味のある人は見る、興味のない人は次に行く、みたいな感じにやっていける。
画像だとECサイトでは当たり前になってる、詳細を見たいとか拡大してみたい場合に使う。画像ファイルに直リンさせるだけだと離脱につながるとかで、ページ内のコンテンツであることを主張したい、ページ内で完結したい場合とかにポップアップさせる。
スマホで閲覧する際に考えること
PC環境であればほぼ確実にリンク元よりも大きな領域で表示されるので気にならないんだけど。
スマホだとそもそも画面いっぱいに表示されてる事が多いわけで、同様にしたところで拡大にならないことは珍しくない。つまり、「画面いっぱいに表示する」タイプのモーダルはほぼ意味がない。
モーダル上で拡大することができる、というのが前提機能になる。
拡大機能のついてないモーダルは地味にあるので注意が必要。ブラウザ準拠のピンチ機能で拡大してもいいんだけど、HTMLの組み方によっては拡大縮小を禁止する方法を採用している場合もあるもんで、モーダル側で処理できるようにしておくのが安心。
どうするのがいいか
とりあえず、自作するならちょっと面倒。親要素で表示領域を決めて、その中に画像をposition:absolute;とかで原寸で配置して、拡大済みの状態だけ閲覧できるようにするなら少々の手間で済む。だけど、拡大縮小のボタンを付けて拡大率を操作するとなるとめんどい。
出来合い物を使うのが手っ取り早いので、導入できるならしてしまった方がいい。
とりあえずで挙げるのは以下の通り。
最近よく使う。PRっぽくなってあれだけど、これでやってしまえば楽。思考停止で導入しちゃっていいんじゃないかしらね。
js版とjQuery版がある。jQuery3で使っても動いた。導入が簡単。
ただ、更新が止まってるのが気がかり。CDNとgithubにデータがあるから急に消えたりはしないと思うけど。
コメント