画像をiOS7のようなズーム演出で開くスクリプト
- 公開日 : 2014年1月28日
- カテゴリ : Web制作
今まで、このブログ内にあるリンク画像はクリックすると新しいウインドウで開くようにしていた。
これは単純なスクリプトで実装していて、以下のページで公開している。
- 自動的に画像を新しいウインドウで開くスクリプト
- https://www.firstsync.net/archives/5296
Lightboxの演出の遅さがストレスになる
以前からLightbox系のものを導入しようかとも思う気持ちもあった。
しかし、Lightbox公式ページ(下にリンク掲載)にあるサンプルを試してもらえばわかると思うが、Lightbox系なものは演出的にはオシャレだがローディングの演出が遅いのがウザいと前々から思っている。
画像をクリックして開くたびに毎回こんな遅いローディングをされていては、画像を開く気持ちも失せる。
これはおそらく多くの人が思っていることだろう。
だからLightbox系のものは実装せず、新しいウインドウでただ開くだけ、というシンプルなものにしておいたのだ。
要は、ユーザービリティ向上のためなのですよ。
- Lightbox2の公式ページ(サンプルデモもあります)
- http://lokeshdhakar.com/projects/lightbox2/
iOS7風のズーム演出のサンプル
しかし今回、iOS7風なズーム演出で画像を開くスクリプトを作って実装してみた。
画像を閉じるときも元の位置にズーム演出で戻ります。
サンプルは下の画像でどうぞ。というか、このブログ内のリンク画像はすべてこの演出で開かれます。
注意:iPhoneやAndroidなどの携帯端末の場合は今まで通り新しいウインドウで開かれるようにしてあります。
その理由としましては、元のページ(本文など)を拡大表示させていた場合に拡大画像が画面からはみ出してしまい、その拡大画像がfixed表示のため、はみ出した部分をスクロールして見ることができなくなるためです。
iPhoneなどのディスプレイの横幅に合わせて表示させることも可能ですが、その場合、オーバーレイさせる意味があまりなくなってしまうのでやめました。
これらの画像の容量は394KBと376KBなので、私の基準からするとホームページやブログ上に載せる写真としては少し容量が重い。
それがこの程度のローディングスピードで開かれるので(通信環境によって差はあるが)、まぁウザいとは言えないのではないのでしょうか。
現状ではソースコードの一部がこのブログ仕様の設定にしてある部分があるので、汎用的に使えるスクリプトとして公開できない状態ですが、もし需要やリクエストがありましたら公開いたしますのでご連絡ください。
2014年2月5日追記:汎用的に使える仕様にして公開いたしました。
以下のページから無料でダウンロードできます。
http://www.1-firststep.com/archives/266/
2014年4月15日追記:Safari限定で拡大ズームのアニメーションがおかしいことに気付き、修正しました。