2010年05月30日
rails に jQuery jCarouselLite を使ってみた。
限られたスペースで複数の画像を効果的に表示させる為、
jQuery jCarouselLite を使ってみたのでメモ。
jquery-1.4.2.min.js を以下から download する。
jquery-1.4.2.min.js
jcarousellite_1.0.1.min.js を以下から download する。
jquery.cycle.zip
download した jquery-1.4.2.min.js を public/javascripts 配下へ置く。
download した jcarousellite_1.0.1.min.js を public/javascripts 配下へ置く。
jcarousellite用 function を carouse.js という名前で public/javascripts に作成。
auto の値は、画像が表示されてから静止している時間の長さ。
speed は、切り替わる速さ。
今回の場合は、0.8秒表示すると1秒かけて切り替わります。
head に以下を追加。
body に以下を追加。img の src を見せたい url に変更する。
以上で完了。
これもかなり使えますね。
ここまで簡単だと自分で作成するのがバカらしいですね。
jQuery jCarouselLite を使ってみたのでメモ。
jquery-1.4.2.min.js を以下から download する。
jquery-1.4.2.min.js
jcarousellite_1.0.1.min.js を以下から download する。
jquery.cycle.zip
download した jquery-1.4.2.min.js を public/javascripts 配下へ置く。
cp jquery-1.4.2.min.js rails/demo/public/javascripts
download した jcarousellite_1.0.1.min.js を public/javascripts 配下へ置く。
cp jcarousellite_1.0.1.min.js rails/demo/public/javascripts
jcarousellite用 function を carouse.js という名前で public/javascripts に作成。
$(function() {
$(".jCarouselLite").jCarouselLite({
auto: 800,
speed: 1000
});
});
$(".jCarouselLite").jCarouselLite({
auto: 800,
speed: 1000
});
});
auto の値は、画像が表示されてから静止している時間の長さ。
speed は、切り替わる速さ。
今回の場合は、0.8秒表示すると1秒かけて切り替わります。
head に以下を追加。
<%= javascript_include_tag("jquery-1.4.2.min.js") %>
<%= javascript_include_tag("jcarousellite_1.0.1.min.js") %>
<%= javascript_include_tag("carouse.js") %>
<%= javascript_include_tag("jcarousellite_1.0.1.min.js") %>
<%= javascript_include_tag("carouse.js") %>
body に以下を追加。img の src を見せたい url に変更する。
<div class="jCarouselLite">
<img src="http://localhost/data/1.jpg" width="200" height="200" />
<img src="http://localhost/data/2.jpg" width="200" height="200" />
<img src="http://localhost/data/3.jpg" width="200" height="200" />
<img src="http://localhost/data/4.jpg" width="200" height="200" />
</div>
<img src="http://localhost/data/1.jpg" width="200" height="200" />
<img src="http://localhost/data/2.jpg" width="200" height="200" />
<img src="http://localhost/data/3.jpg" width="200" height="200" />
<img src="http://localhost/data/4.jpg" width="200" height="200" />
</div>
以上で完了。
これもかなり使えますね。
ここまで簡単だと自分で作成するのがバカらしいですね。
【Railsの最新記事】
電気料金計算