PhotoSwipeがすごい!

2016-03-17 08:30

JavaScriptの画像ビューアライブラリのPhotoSwipeが素敵だった。

仕事でJavaScriptの組み込みなども行っているのですが、画像を拡大させる様な見せ方を求められることが多々あります。
簡単な方法では、画像をblankで開くとかもあるのですが、あまりスマートではないですね。別途作っても良いのですが、PCやスマホ、タブレットなどと考えていくと、なかなか大変な話です。

「ここまで要望のある機能なら」と言うことで調べてみたら凄いのが出てきましたので紹介したいと思います。

PhotoSwipe

ページ内の設定された画像をタップすると、かっこいいアニメーションで画像が拡大されます。更に、拡大後の画像をスワイプすると、次の画像に移動できます。
他にも画像の拡大縮小やキャプション、シェアなど機能などもあります。

使ってみる

実際に組み込んでみると、非常に軽快な動作です。若干古めのiPhoneやAndroidでも問題なく動作します。
また、PCでも非常に綺麗に表示をしてくれるので、今後はこのライブラリを重宝することになりそうです。

組み込み方

こちらでは実際の組み込み方などについての説明は省略します。
以下のサイトが非常にわかりやすく解説をしてくれていたので、そちらを紹介させて頂きます。

PhotoSwipeの使い方!Light Boxの決定版を導入しよう!

まとめ

スマートフォンが普及してから、Webサイトでもアプリライクな動作を求められることが非常に多くなってきました。
フロントエンドでもやることが非常に多くなってきているので、便利なライブラリなどを上手く使いこなしていくことも大事だと感じています。
また、ライブラリを使う際には色々と気をつける点もあるので確認は忘れないようにしましょう。
ライセンスや動作環境、etc・・・

ときにはライブラリの中身を見てみるなども、とても勉強になるのでオススメです。

またいいライブラリがありましたらこちらで紹介させて頂きます。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。