colorboxをスワイプ対応にする

2015.04.22

lightbox系プラグインで有名なcolorboxですが、スワイプなどのタッチ操作に対応してない。
colorboxはインライン要素などを表示できたりと機能豊富なのがいいんですが、他によさげなプラグインがなかったので、タッチ操作に対応させる手段として、jQuery.event.swipeを使うことにしました。

colorbox
Colorbox - a jQuery lightbox

jQuery.event.swipe
jQuery.event.swipe

HTML

<a class="thumb" href="#inline-contents"><img src="img/xxx.jpg" alt=""></a><!-- サムネリンク -->

<div class="contents" id="inline_contents">
  <h1>inline contens</h1>
  <p><img src="img/index/xxx_large.jpg" alt=""></p>
  <p>hogehoge</p>
  </div>
</div><!-- モーダルで表示させたいコンテンツ -->

js

$(function() {
  $('.thumb').colorbox({
    inline:true,
    width: '100%'
  });

  $('.contents')
  .on('swipeleft',function(){
    $.colorbox.prev();
  })
  .on('swiperight',function(){
    $.colorbox.next();
  });
});

これだけ！簡単で助かる〜〜〜〜〜〜