Swiping and reordering lists of elements on touch screens, no fuss. A tiny library by Kornel. Swipe, hold & reorder or instantly or either or none of them. Can play nicely with: interaction inline CSS transforms stylesheet transforms and selectable text, even though animating elements with selected text is a bit weird. iOS Safari Mobile Chrome Android Firefox Opera Presto and Blink No dependencies
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
おとなになりきれない兄(0.9)＋ニートな弟(0.3)の ロメオリンクス創業と事業展開にまつわる奮闘記。 フリックとはiPhoneやAndoroid端末に代表されるスマートフォンのタッチスクリーン上を指でこするような動作をすることでアプリケーションを操作する方法です。 今回はそのフリックをWebアプリケーションで検出する仕組みを考えます。onflickなんてのがあればよいのですが、なさそうなので三種のタッチイベントを組み合せてこれを実現することにします。基本的な考え方は以下の通りです。 1．タッチスタートイベントを取得し、そのときのX座標を取得する。 2．タッチムーブイベントを取得し、そのときのX座標を取得する。 3．タッチエンドイベントを取得し、1．と2．のX座標の差が存在する場合、フリック動作が行われたとみなす。 以下、ソースコード。 -------------------------
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック／スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
iPhoneでフリックギャラリーを実装するjQueryプラグイン「flickGal」のデモページです。タブスタイル
13日に公開されたiOS5。iPhone4Sに搭載されている最新OSですが、iPhone3GS/4、iPad/2、iPod touch（第3/4世代）にも対応しているので、わくわくしながらアップデートされた方も多いのではないでしょうか？ 私もそのひとり。iPhone4を13日午前4時から約3時間かけてアップデートしました。わくわくしながら触ってみると何だかフリック入力に違和感が……。何というか、文字入力ミスが多発して、変換候補の表示ももっさりしていてイライラ。 iPhone4なのに何で？パワー不足？？そんな事は無いはず……。と思っていたのですが、Twitterでみなさんのツイートを見ていると、どうやら大きく二つの原因があったようです。（ちなみに、Appleから正式なコメントが出ていないのであくまで私の予想です(^_^;)。） iOS5になってフリック入力に影響が出た理由 キーボードの認識エ
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
iPhoneでの文字入力はフリック入力のみ、という人も多いと思います。実際、一度体得してしまえば確実にフリック入力のほうが速いです。 しかし、そんなフリック入力にも「ちょっとなぁ…」というところがありました。その1つが同じ文字の連続入力です。 iOS 5 のアップデートで、フリック入力時における同じ文字の連続入力が大幅に楽になりました。これは全フリック入力派にとって嬉しいことでしょう。 さっそく紹介に入ります！ iOS 5 の使い方まとめページはこちらからどうぞ！ 【ただいま更新中】iOS 5 の使い方まとめ！新機能を中心にご紹介いたします！ 設定 それではサクッと設定していきましょう。 設定アプリの「一般」→「キーボード」→「各国のキーボード」と進んで下さい。 「日本語テンキー」を選択すると、そこには謎の【フリック入力のみ】という表示が…さっそくタップしてフリックのみ状態にしてみました。
flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。 Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。 フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。 写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。 フリック操作でアニメーションしながら写真が切り替わります。 大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。 Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられ
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ iPhoneサイトで画像ギャラリーをフリック操作に対応させる※iPhoneで見てください フリック対応のデモはこちら 先月、iPhoneサイトのデザインを集めたiPhoneデザインボックスを公開しました。 反響はすごくあり、アルファブロガーのネタ帳さんやWebクリエイターボックスさん、PHPSPOTke-tai.orgさんなど多くの方に紹介していただきました。 ありがとうございます。 現在、スマートフォンのサイトのコーディングで簡単な方法として フレームワークのjQueryMobileを使う方法があります。 私は、最初から楽をするのが好きではないので自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
