jQuery MobileでiPadやiPhoneのSwipeにも対応したSlideshowにする

投稿日：

ipad-swipe画像の一覧をSlideshow形式で表示させるときにiPadのSwipeにも対応させる方法。

個人的にオススメなのは、好きなjQuery Plugin + jQuery Mobileの組み合わせ。

私がよく使うのはjQuery Toolsのscrollable. Source Codeがgithubで公開されていて、Licenseも
NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
なので、組み合わせを気にしないで済む。

その他のjQuery Plusginは下記Siteを参考に。

 

jQuery MobileはiPad, iPhone, AndroidのSwipe Eventを取得するためだけに利用する。方法はOfficial Documentを参考にしながら、autoInitializePageをfalseに設定する。

<script type='text/javascript' src='js/jquery.js'></script>
<script>
$(document).bind("mobileinit", function(){
  $.mobile.autoInitializePage = false;
});
</script>
<script type='text/javascript' src='js/jquery.mobile.js'></script>

jQuery Mobileが必要になるのはmobile端末の場合だけなので、前の記事を参考に端末を判別して、読み込むようにすれば完璧。

jQuery Toolsのscrollableは簡易的にswipeに対応しているけど、精度が全く違うので、この機能をOffにしつつ、jQuery Mobileが提供しているEventにBindする。

jQuery(function($) {
    var jSlide = $("#content").find('.gallery').scrollable({
        touch: false
      });
    jSlide.bind('swipeleft', function(){
        jSlide.data('scrollable').next();
    });
    jSlide.bind('swiperight', function(){
        jSlide.data('scrollable').prev();
    });
});

jQuery Mobileは他のTouch操作もEventで提供してくれるので、iPadに対応したSiteを簡単に作れそう。

 

< Related Posts >