jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験
iPhoneやiPad、Androidといったスマートフォンやタブレット端末では
フリック／スワイプと呼ばれる指でスライドさせるUIが付き物になっています。
jQueryでもこのフリック／スワイプ動作を実装できるプラグインはたくさんありますが
いざ自分で作ろうとすると意外と大変な動作だったりします。
この動作についていろいろ調べていたところ
Sleipnirのフェンリルさんのデベロッパーズブログにて、
iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ)
と題した、jQueryでiPhoneやAndroid、PCでタッチイベントを取得する方法がとても参考になったので
この記事を参考にしてフリック／スワイプで操作するシンプルな画像ギャラリーを作ってみました。
jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験
まずは動作サンプルから。
下記の画像をフリック／スワイプしてみてください。
※PCのマウス操作でも動作します。
拡大画像部分を左右にフリック／スワイプすることで
画像が一枚一枚スライドします。
この動作の全体構成について、
HTMLから。
[html]
◆HTML
[/html]
上部の＜div id=”flickscroll”＞がメイン部分にあたるソースになり、
下部の＜div id=”flickthumb”＞がサムネイル部分になります。
２つの＜div＞の中にはそれぞれにリストを入れ込みます。（ID名は変更可能）
HTMLはメイン用とサムネイル用の＜div＞と＜ul＞リストを用意するのみです。
リストの数はいくつでも増減可能です。
そしてこのHTMLソースに対してのCSSは以下の様に。
[css]
◆CSS
/* #flickscroll
————————— */
#flickscroll {
margin: 0 auto;
width: 400px;
height: 400px;
text-align: left;
position: relative;
overflow: hidden;
cursor: pointer;
}
#flickscroll ul {
top: 0;
left: 0;
height: 400px;
position: absolute;
overflow: hidden;
}
#flickscroll ul li {
width: 400px;
height: 400px;
float: left;
display: inline;
overflow: hidden;
}
/* #flickthumb
————————— */
#flickthumb {
margin: 10px auto;
width: 400px;
height: 100px;
text-align: center;
}
#flickthumb ul {
width: 400px;
height: 100px;
}
#flickthumb ul li {
width: 100px;
height: 100px;
float: left;
cursor: pointer;
display: inline;
}
#flickthumb ul li.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#flickscroll ul:after,
#flickthumb ul:after {
content: “.”;
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#flickscroll ul,
#flickthumb ul {
display: inline-block;
overflow: hidden;
}
[/css]
実際のフリック／スワイプ動作させる箇所「#flickscroll」で
全体の幅と高さの表示サイズを指定しています。
全体を囲うID「#flickscroll」の中に入る
リスト＜ul＞は「position:absolute」で絶対位置にして、
幅widthは＜li＞の数によってスクリプト側で計算して入れるので
ここでは指定しないようにしています。
サムネイル箇所「#flickthumb」については
とくにスクリプト動作には影響しないレイアウト調整のみになっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
メイン部分の＜div＞要素の幅と高さの値を元に
フリック／スワイプ動作でスライドさせる＜ul＞の幅やスライドさせる距離など計算しています。
スクリプト開始部分にある
------------------------------------------------
var $setMainId = $('#flickscroll');
var $setThumbId = $('#flickthumb');
var scrollSpeed = 300;
------------------------------------------------
は上から
------------------------------------------------
・該当するメインエリアのID名
・該当するサムネイルエリアのID名
・フリック／スワイプ動作でスライドさせた時のスライドスピード
------------------------------------------------
となっているので、
値を変更することでカスタマイズが可能です。
メインエリア（画像）部分のアクションで
------------------------------------------------
・タッチした時
・タッチしたまま移動している時
・タッチが離れた時
------------------------------------------------
の３点でのそれぞれの値を見て
処理を加えてあります。
この３点での値を取得する方法が分かれば
画像ギャラリーのみでなく、いろいろなフリック／スワイプ操作での
UIが実装できるように感じています。
サンプルの動作環境は
・Windows
IE6,7,8
Forefox
Google Chrome
Safari
・Mac
Firefox
Safari
・iPhone
・iPad/iPad2
・Android
以上の動作で確認済みです。
jQueryでフリック／スワイプ動作のスライドギャラリーを作成する際に是非。。
ピンバック: jQueryでフリック／スワイプ動作の画像スライドギャラリーを作成する実験 | BlackFlag | WordBuff.in
ピンバック: jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験 | BlackFlag
はじめまして。
見ていると、色々と利用出来そうなことを思いつき、
非常に参考にさせてもらっています。
こちらのスクリプトを利用しようと検証しておりますが・・・
リンクを設置するとPCではうまくいきますが、タブレット端末だリンクが反応しません。
しかたがないのでしょうか。
ご教示いただけると幸いです。
よろしくお願いします。
＞gogoisuさん
コメントありがとうございます。
ご質問いただきました内容についてですが
このスクリプトではフリック箇所に関しての
リンク要素についての対処はしていないので
画像にリンクを張っても正常に動作しません・・・
タッチイベントとクリックイベントの対処にも対応したパターンも出来次第、
ここで紹介させていただきたいと思っておりますが
現状まだ用意できておりません。。
申し訳ないのですが
何卒よろしくお願いします。。
返信が遅くなってしまって申し訳ありません。
ご回答いただきどうもありがとうございます。
「BlackFlag 」さんのサイトはみていて、非常に勉強になります。
よさそうなサンプルがあったら、また参考にさせてください。
初めてコメントさせて頂きます。
Yuzyと申します。
いつも参考にさせて頂いております。ありがとうございます。
早速ではございますが本ソースコード上では
最初の画像を何番目の画像にする、といった設定は可能でしょうか？
＞Yuzyさん
コメントありがとうございます。
ご質問いただいた件についてですが
ご希望されている設定構成を把握しきれておりませんが
当記事で紹介しているスクリプトでは
表示する画像の順番はHTML側で記述する構成になっておりますので
そちらで並び順を調整していただく形になります。
よろしくお願いします。
分かりやすく参考にさせて頂いています。
初心者なので、分からないことだらけでとても助かっています。
写真が多くなった時、（10枚など）サムネイル部分の画像が最初の4枚しか表示されません。
全て表示したい、もしくは画像ではなくドット？で対応したい時はどうようにすればよろしいでしょうか？
他のページにもし説明がありましたら重複で申し訳ありません。
＞shioさん
コメントありがとうございます。
このフリックスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
サムネイル部分の見た目（レイアウト）に関しては
スクリプト側での制御ではなくCSSで調整する形になります。
CSSの「#flickthumb」部分のサイズ等を調整することで
サムネイルを全て表示することが可能ですので
実装しようとしているされているレイアウトに合わせて
調整してみてください。
サムネイルをドットにする際も
当記事のスクリプト構成の場合は
サムネイル部分の画像をドット画像にして
CSSでサイズ等を調整する形になっております。
（自動ページネーション付与機能は付いておりません・・・）
よろしくお願いします。
はじめまして、にゃん大好きなegaoです=^.^=
とてもシンプルなスライダーですね。
今まで、jquery.touchslider.jsというプラグインを検討していましたが、
早速、乗り換えることにしました。
javascript側のグローバル変数に対して
現在表示している画像番号をjQuery側から出力する方法と
表示したい画像番号を
javascript側からjQuery側へ指定する方法について
教えてください。
よろしくお願いします。
egaoです。
先日の問い合わせの件は、自己解決しました。
スクリプトを眺めていたら、変数の意味が分かってまいりました。
画像番号を出力する方法は、
this.leftBeginをlistWidthで除算すれば得られました。
画像番号を指定する方法は、
$(this).css(‘left’)を最初に画像番号*画像幅分だけ
ずらすことにしました。
お騒がせしました。
いいscriptを公開して頂きありがとうございます。
こんにちは。
個人・商用問わず使用可とのことですが、運営する商用サイトに併設の個人ブログで使わせていただきました。
ウチのサイトに組み込んでいるjqueryのバージョンは少し古いのですが、それでも問題なく動作します。
PCのマウス操作でも動作するし、カスタマイズも容易で用途はとても広いのではないかと思います。
今後はサイト本体での利用も検討してみたいと思います。
以上、はなはだ簡単ですがお礼並びに御報告と致します。
＞otziさん
コメントありがとうございます。
当記事のフリックスライドショーをご活用いただいている様で
嬉しく思っております。
そのようなお言葉をいただけると
とても嬉しく励みになります。
ほかにもいろいろと紹介させていただいておりますので
Webサイト制作の際にあれこれお試しいただけると幸いです。
よろしくお願いします。
ピンバック: スマホサイト作成時に役立つプラグイン集 | モノづくりブログ - 株式会社8bit
こちらのサイトは、シンプルで使いやすそうなものばかりなので、
初心者なのに、ついつい色々試してみたくなります。
このスライドショーを是非使わせていただこうと設置してみたら、
簡単に動作確認までできました！本当に丁寧でわかりやすいです。
ただ、私の問題なのですが、写真の数がとても多く、
サムネイルを小さくしても入りきれず2段になってしまいました。
そこでサムネイル部分をスクロールすることは可能でしょうか？
実際には、インラインフレームでこのスライドショーを表示しようと考えていますので
今後もっと写真が増えたとしても、スクロールすれば問題ないかな？と思ったのですが
そんなことは可能でしょうか？また写真が多いと何か問題がありますでしょうか？
お時間のあるときによろしくおねがいします。
＞FUKUさん
コメントありがとうございます。
そのようなお言葉をいただけると
とても嬉しく励みになります。
当記事のスライドショーのサムネイル部分は
特にその様な仕様にはしておりませんが
別途サムネイル部分にカルーセルなどのスクリプトを
組み合わせて実装することで可能になるかと思います。
写真の数に関しては
多くなればその分ページの負荷にもなるので
ある程度の数に絞った方がいいですが
スクリプト動作自体には影響は無いかと思います。
お試しください。
よろしくお願いします。
初めてコメントさせて頂きます。
mikiと申します。
初心者の私でも理解できるので、いつも参考にさせていただいております！
ありがとうございます！
こちらのスライドショーですが、
左から右へスワイプしていくようになっていますが、
右からスワイプしていくようにすることは可能でしょうか？
よろしくお願いします。
＞mikiさん
コメントありがとうございます。
当記事のフリックスライドショーをご活用いただいている様で
うれしく思っております。
「右からスワイプしていくようにする」というのが
どのような動作のことを想定しているのか少々不明なのですが
スクリプトの最後に
————————-
＄setThumbUl.children（’li:last’）.click（）;
————————-
のような記述を入れておけば、
スライドするアニメーションは見えてしまいますが、
ページロード時には、末端のリストが表示され
右からスワイプする形になります。
お試しください。
よろしくお願いします。