ITエンジニア/デザイナ向けにオープンソースを毎日紹介

flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。

Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。


フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。

写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。


フリック操作でアニメーションしながら写真が切り替わります。


大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。


Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられますね。


HTMLコードです。HTML側はいたって普通のリストです。


JavaScriptコードです。エレメントを指定してflickGalを実行するだけです。

写真の切り替えはもちろん機能選択、Amazonのようなお勧め商品表示、Webサイトの機能紹介スライド等色々な使い方が考えられそうです。

flickGalはMIT LicenseとGPLのデュアルライセンスになっているオープンソース・ソフトウェアです。


MOONGIFTはこう見る

ギャラリーというと写真の切り替えというイメージが強くなりますが、機能紹介スライドをはじめ、色々な使い方が考えられます。最近では海外のブログにおいて写真をまとめて紹介する時にスライドショーを使っている所もあります(MashableやTechCrunchなど)。

要は使い方次第ということですが、iPhoneのフリック操作に対応している所にflickGalの利点があります。アニメーションもスムーズでさくさくと切り替えられます。使える場面の多いライブラリだけに覚えておくときっとぴったり当てはまる場面があるはずです。

flickGal - jQueryプラグイン | stakamura

flickGal デモページ | stakamura

piglovesyou/flickGal - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2