スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「Roto」

スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「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>
あとはJavaScriptを以下のように記述します。

<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>
なお、これらのJavaScriptは</body>直前でないとAndroidでは対応できませんでした。
また、CSSはdivにoverflow:hidden,liにfloatなどをかける必要があります。

スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「Roto」サンプル

sponsors

「スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「Roto」」をシェアする

記事作成:
記事URL:

TOP > > スマートフォンの画像ギャラリーにも使える!タッチでスライドさせられる「Roto」