ruby on railsで作ったサイトでeach do して画像をarayしてるものってありますよね。
その画像たちをスライドショーさせる方法があります。
デモはmakepo（ブログ、サイト、出品商品宣伝サイト）をご覧ください。
railsでループ処理された画像をスライドショーさせる方法
[rails(erb)]
<div class = “posts”>
<div class = “image” id=”slideshow<%= post.id %>”>
<% post.image.each do |image| %>
<div>
<%= image_tag(image.url, class:”img-responsive”) %>
</div>
<% end %>
</div>
</div>
[js]
<% if post.image.count > 1 %>
<script>
$(“#slideshow<%= post.id %> > div:gt(0)”).hide();
setInterval(function() {
$(‘#slideshow<%= post.id %> > div:first’)
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow<%= post.id %>’);
$(‘.grid’).masonry(‘reloadItems’);
$(‘.grid’).masonry(‘layout’);
}, 2000);
</script>
<% end %>
こういった形で入れていただくと大丈夫です！
解説
まずerbですが
<div class = “image” id=”slideshow<%= post.id %>”>
によってslideshowとpost.id を関連づけました。
この方法はhtmlのclassの中にrubyのコードを入れる方法です。
そしてその下層に
<% post.image.each do |image| %>
railsのeach doですね。
こちらを入れていきます。
<%= image_tag(image.url, class:”img-responsive”) %>
その後イメージタグを書きましょう。
これによって画像がはき出されます。
そしてjsについてですが
<% if post.image.count > 1 %>
まずif文で画像が一個であった場合は該当しないとしてください。
そうしないと、画像が一つだった場合は
一つ目の画像が表示され次の画像へいった際に真っ白になってしまいます。
いかがjs部分です。
$(“#slideshow<%= post.id %> > div:gt(0)”).hide();
setInterval(function() {
$(‘#slideshow<%= post.id %> > div:first’)
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow<%= post.id %>’);
$(‘.grid’).masonry(‘reloadItems’);
$(‘.grid’).masonry(‘layout’);
}, 2000);
本来は下記部分のみで画像が切り替わってくれます。
ちなみに下記はrailsでarayしていない時のバージョンです。
$(“#slideshowid > div:gt(0)”).hide();
setInterval(function() {
$(‘#slideshowid > div:first’)
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshowid’);
, 2000);
idの部分にpost.idの番号を入れると一つだけ画像が切り替わるサイトになります。
これは動的ではない状態です。
登録制でなければ、このコードをどんどん増やしていけば、画像が全て切り替わるようになります。
しかし、動的なサイトではそんな面倒なことはできませんので
jsにrailsのスクリプトを編入していきます。
$(“#slideshow<%= post.id %> > div:gt(0)”).hide();
setInterval(function() {
$(‘#slideshow<%= post.id %> > div:first’)
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slideshow<%= post.id %>’);
それがこうですね。
idの部分に直接<%= %>を入れました。
postのidごとに画像を変えて欲しいのでidに紐づけています。
これを行わなければ全てのpostで同じ画像が表示切り替わりされてしまいます。
heightが変わってもmasonryをリロード
そしてその下の部分はmasonryに対応したコードです。
こちらはmasonryを使っていなければ必要ありません。
また、画角が同じサイズの画像がループする場合は必要ありません。
makepoではheightが違う画像が連続して登録されているので
下記のように付け足しました。
ちなみにこちらは探すのに非常に苦労下部分です。
$(‘.grid’).masonry(‘reloadItems’);
$(‘.grid’).masonry(‘layout’);
}
この二文を足していただけると、masonryが画像切り替え時にリロードしてくれます。
$(‘.grid’).masonry(‘reloadItems’);
こちらの部分はすぐに出てくるコードですが、これだけでは効きませんでした。
大事なのは
$(‘.grid’).masonry(‘layout’);
こちらを書かなければ効きません。
日本語ではすぐに出てこないと思いますので、書きました。
