[katyos.Lab]


iPhoneサイトで画像ギャラリーを簡単にフリック操作対応させる

2011-03-26 22:29:40 Theme: iPhone/iPadアプリ
jQueryでフリック操作に対応させる


iPhoneサイトで画像ギャラリーをフリック操作に対応させる

※iPhoneで見てください
フリック対応のデモはこちら


先月、iPhoneサイトのデザインを集めたiPhoneデザインボックスを公開しました。
反響はすごくあり、アルファブロガーのネタ帳さんWebクリエイターボックスさんPHPSPOTke-tai.orgさんなど多くの方に紹介していただきました。
ありがとうございます。

現在、スマートフォンのサイトのコーディングで簡単な方法として
フレームワークのjQueryMobileを使う方法があります。

私は、最初から楽をするのが好きではないので自力でコーディングしました。
最初は分からないことばかりでしたが、jQueryMobileを使ってのスマートフォンサイトの構築メモを参考にすれば基本的なことが分かります。

iPhoneサイトなのでただコーディングするだけだともったいないですね。
せっかくなので、指で画像を左右に移動させるUI(カルーセル)をつけてみました。
あまり情報がなくて時間がかかったのですが実装ができたので実現方法をメモ!

jQueryで指で操作できるようにする

現在、フリック操作でスクロールを対応させる方法としておすすめなのが
jQueryのプラグインでjQuery.flickable
があります。設置も簡単なので直ぐに実装することができます。

これでも良かったのですが、私がやりたかったことは画像の下に●が出て
どれぐらいの枚数があるのか分かるようにしつつ、クリックしたらその画像を
表示させるものだったので今回は使いませんでした。

そこで今回使ったのは、jQueryのプラグイン「jCarousel」を使いました。
設置がすごい簡単なのでプログラムが苦手な方でも直ぐに実装できます。

「jCarousel.mobile.js」の使い方

jQueryとjCarouselをダウンロードします。
jQuery
jCarousel


JSを読み込む

jQueryとjCarouselを読み込みます。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jCarousel.min.js" type="text/javascript"></script>


CSS

CSSでアニメーションをさせます。
アニメーションスピードは、transitionで調整できます。
.jCarousel {
margin: 0 auto;
margin-bottom: 15px;
text-align: center;
-webkit-transition: margin 0.5s ease-in-out;
transition: margin 0.5s ease-in-out;
test-align: center;
}


HTML

画像をli要素でマークアップします。そして、ul要素に「jCarousel」のクラスを
指定します。これだけでだけでフリック対応します。
<ul class="jCarousel">
<li><img src="images/1.jpg" width="320"></li>
<li><img src="images/2.jpg" width="320"></li>
<li><img src="images/3.jpg" width="320"></li>
<li><img src="images/4.jpg" width="320"></li>
<li><img src="images/5.jpg" width="320"></li>
</ul>



全ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1.0">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="format-detection" content="telephone=on">
<title>iPhoneサイトでフリック対応した画像ギャラリーのデモ</title>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jCarousel.min.js" type="text/javascript"></script>
<style>
h1 {
font-size: 0.9em;
}

.jCarousel {
margin: 0 auto;
margin-bottom: 15px;
text-align: center;
-webkit-transition: margin 0.5s ease-in-out;
transition: margin 0.5s ease-in-out;
test-align: center;
}



</style>
</head>
<body>
<h1>iPhoneサイトでフリック対応した画像ギャラリーのデモ</h1>
<ul class="jCarousel">
<li><img src="images/1.jpg" width="320"></li>
<li><img src="images/2.jpg" width="320"></li>
<li><img src="images/3.jpg" width="320"></li>
<li><img src="images/4.jpg" width="320"></li>
<li><img src="images/5.jpg" width="320"></li>
</ul>
</body>
</hmtl>

フリック対応のデモはこちら
※iPhoneで見てください

WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成をしたいときに、今回使ったjQueryの
プラグイン「jCarousel」を使えば、よりアプリっぽいUIが実装できます。


iPhoneサイトのWebデザインギャラりー

iPhoneに対応したWebサイトで参考にしたい場合は、「iPhoneデザインボックス」をぜひ利用してみてください。
iPhoneをもっていない方でも利用でできるように下層ページのキャプチャーだけでなくPCサイトとiPhoneサイトの比較もできます。

iPhoneサイトのWebデザインギャラりー

iPhoneデザインボックス


AD
いいね!した人  |  Comments(7)  |  リブログ(0)

yopiさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事
 もっと見る >>

Comments

[Publish Your Comment]

7 ■Re:無題

>みわコさん
貴重な情報ありがとうございます!

たぶん、ページの更新を行わないので読み込めてないみたいですね。

トップページにjCarousel.jsを読み込ませてBページには実行させる処理を入れてみたらどうですかね?

6 ■No Title

iPhone対応サイトに、使わせていただきました。
ありがとうございます!!
そこで、気づいたことがあったので、、、記しておきますね。

A→トップページ
B→jCarouselを用いたページ

とし、AページのリンクボタンからBへ移る場合に、
Ajaxを使ったjQuery mobileデフォルトのリンクだと、
プラグインを読み込みませんでした。
写真がすべて表示されてしまいます。
jCarousel.jsを読み込めなかったのか・・・?
ページをリロードすると、ちゃんと表示されました。

そこで、Aページのリンクボタンに
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/page_links/
にあるように、<a>タグにdata-ajax=“false”を指定すると、問題なく読み込みました。

jQuery mobileプライグイン特有の
Ajaxを使ったリンク先では、
リロードなしで使うことはできないものでしょうか??

5 ■Re:ありがとうございます!!

>CHOSHIさん
こちらこそありがとうございます。
他にも同じような現象が起きている方がいます。
調べてみますね。

もし手間でなければサンプルソースをのまま使って画像だけ差し替えてみてください。

4 ■ありがとうございます!!

簡単に設置できてすごくシンプルでギャラリーのページで重宝しそうです!

質問ですが、一枚のhtmlに複数設置した場合、
一番はじめに読み込まれる(一番上方に記述してある)
スライドのみ正常に表示され、後続のものは
正しく表示されません。

その後、画像をスライドさせるあるいは画面サイズを変える(縦横の切り替え)
と正常に表示されます。
他の情報は記述せず、スライドのみでテストしてみましたが、
やはり上記のような現象がでてしまいました。

何か解決法があればご教授いただければと思います。

3 ■Re:質問です

>Saoさん
ソースや現象が実際に分からないのでなんとも
言えませんが、CSSの関係ではないでしょうか?

一度余計なCSSや情報をなくしギャラリーだけにして、確認してみたらどうでしょうか?

2 ■質問です

早速実践させていただきました!シンプルでとても使いやすいです。
一点気になるのが、初回表示時、一枚目と二枚目の画像が重なってしまいました。
バグでしょうか?
これさえ修正できればとてもありがたいです…。

1 ■面白いですね!

さっそく使わせてもらいました。
わかりやすい記事ありがとうございます。

Add your comment

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。