2010年05月30日
rails に jquery cycle を使ってみた。
限られたスペースで複数の画像を効果的に表示させる為、
jQuery Cycle を使ってみたのでメモ。
jquery-1.4.2.min.js を以下から download する。
jquery-1.4.2.min.js
jquery.cycle.zip を以下から download する。
jquery.cycle.zip
download した jquery-1.4.2.min.js を public/javascripts 配下へ置く。
download した jquery.cycle.zip を展開して public/javascripts 配下に設置する。
cycle用 function を cycle.js という名前で public/javascripts に作成。
'.slideshow' は、呼び出す時の div の class で使うことを頭に入れておく。
head に以下を追加。
body に以下を追加。img の src を見せたい url に変更する。
以上で完了。
後は、画像を変えたり、fade を変えたりすればいいわけですね。
すごく簡単ですね。
jQuery Cycle を使ってみたのでメモ。
jquery-1.4.2.min.js を以下から download する。
jquery-1.4.2.min.js
jquery.cycle.zip を以下から 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 した jquery.cycle.zip を展開して public/javascripts 配下に設置する。
unzip jquery.cycle.zip
cp jquery.cycle.min.js rails/demo/public/javascripts/
cp jquery.cycle.min.js rails/demo/public/javascripts/
cycle用 function を cycle.js という名前で public/javascripts に作成。
'.slideshow' は、呼び出す時の div の class で使うことを頭に入れておく。
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
head に以下を追加。
<%= javascript_include_tag("jquery-1.4.2.min.js") %>
<%= javascript_include_tag("jquery.cycle.min.js") %>
<%= javascript_include_tag("cycle.js") %>
<%= javascript_include_tag("jquery.cycle.min.js") %>
<%= javascript_include_tag("cycle.js") %>
body に以下を追加。img の src を見せたい url に変更する。
<div class="slideshow">
<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>
以上で完了。
後は、画像を変えたり、fade を変えたりすればいいわけですね。
すごく簡単ですね。
【Railsの最新記事】
電気料金計算