colorboxをスワイプ対応にする
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(); }); });
これだけ!簡単で助かる〜〜〜〜〜〜