スマートフォンの画像ギャラリーにも使える！タッチでスライドさせられる「Roto」
昨今のスマートフォンブームで、対応を迫られることも多い、画像ギャラリーなどのスライド機能。
既存のギャラリー系JavaScriptだとタッチがうまく取れないこともあります。
そんな時は、Rotoを使用してみてはいかがでしょうか。
Rotoからファイル一式をダウンロード。
下記のようなHTMLがあるとします。
<div id="id名">
<ul>
<li><img src="Image1.png" /></li>
<li><img src="Image2.png" /></li>
<li><img src="Image3.png" /></li>
<!-- 以下画像分 -->
</ul>
</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.roto.1.0.js"></script>
<script type="text/javascript" src="jquery.bez.1.0.js"></script>
<script type="text/javascript">
$(function() {
$("#id名").roto({
direction: "v" //縦にスライドさせたい場合は記述
});
});
</script>
また、CSSはdivにoverflow:hidden,liにfloatなどをかける必要があります。
スマートフォンの画像ギャラリーにも使える！タッチでスライドさせられる「Roto」サンプル
コメントする
記事作成：2011年9月13日 09:55
