flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！
公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。
デモページ
がありますので、見てみてください。
http://stakam.net/jquery/flickgal/demo
※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。
実装のしかた
説明ページを見てみてください。
http://stakam.net/jquery/flickgal/
基本的にはこんな風に実装する方式です。
- いくつかのルールにそってHTMLをコーディング
- $(要素).flickGal() で実装
参考にした記事、工夫した点
iPhoneのtouchEventなどに関して
nogunoguさんの記事を大変参考にさせていただきました。この記事をきっかけに、作ることができました。ありがとうございます。
描画の問題
http://collisions.doppac.cc/archives/310で解決しました。大変感謝です。
こちらの方が記事で仰るように、iPhoneで要素をスムーズに動かすときは、scrollLeftや、{position:absolute; left:0px} ではだめでした。カクカクするし、画像の描画に遅延や荒れが見られました。この問題は、下記のCSS3をインラインで指定して解決できました。
-webkit-transform : translate3d(0,0,0)
リンクをつける
フリック要素内にリンクがつけられない問題がありました。どのタイミングで、e.preventDefault()をすれば良いのか、分からなかったからです。
でも、ふと'touchmove'のタイミングですればいいじゃんということに気がつき、やってみるとうまく行きました。
-
- -
追記 2011/02/03
オプション「lockScroll」を追加しました。piyoriさん、フィードバックをいただきありがとうございました。
「PCでは確認できません」に変更しました。1.0.0からなにかがおかしくなった。
-
- -
追記 2011/09/02
たまにブクマもらうので、そろそろアンドロイド対応＆リファクタリングするぞ
-
- -
追記 2011/10/13
はてぶで紹介してもらった。
Android で動いているのかが割と気になる。 → 聞いたら友達が「多分動いてるんじゃん」とのことです
-
- -
追記 2012/06/20
さっき、「端っこに重み（v1.2.1）」を追加してみました。このライブラリのアップデートは地味です。
-
- -
追記 2013/05/23
githubプロジェクトに、exampleフォルダを追加しました。
