Rails 4-轮播助手-图片库 [英] Rails 4 - carousel helper - image gallery
问题描述
我试图了解如何改编本教程以制作可在Rails 4应用程序中使用的轮播助手。
Im trying to understand how to adapt this tutorial to make a carousel helper that I can use in my Rails 4 app.
https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel
我将帮助程序设置为：
module CarouselHelper
def carousel_for(images)
Carousel.new(self, images).html
end
class Carousel
def initialize(view, images)
@view, @images = view, images
@uid = SecureRandom.hex(6)
end
def html
content = safe_join([indicators, slides, controls])
content_tag(:div, content, id: uid, class: 'carousel slide')
end
private
attr_accessor :view, :images, :uid
delegate :link_to, :content_tag, :image_tag, :safe_join, to: :view
def indicators
items = images.count.times.map { |index| indicator_tag(index) }
content_tag(:ol, safe_join(items), class: 'carousel-indicators')
end
def indicator_tag(index)
options = {
class: (index.zero? ? 'active' : ''),
data: {
target: uid,
slide_to: index
}
}
content_tag(:li, '', options)
end
def slides
items = images.map.with_index { |image, index| slide_tag(image, index.zero?) }
content_tag(:div, safe_join(items), class: 'carousel-inner')
end
def slide_tag(image, is_active)
options = {
class: (is_active ? 'item active' : 'item'),
}
content_tag(:div, image_tag(image), options)
end
def controls
safe_join([control_tag('left'), control_tag('right')])
end
def control_tag(direction)
options = {
class: "#{direction} carousel-control",
data: { slide: direction == 'left' ? 'prev' : 'next' }
}
icon = content_tag(:i, '', class: "glyphicon glyphicon-chevron-#{direction}")
control = link_to(icon, "##{uid}", options)
end
end
end
然后我尝试在我的项目显示视图中使用它。
I'm then trying to use it in my projects show view.
我有：
<% @project.galleries.order(created_at: :asc).each do |gallery| %>
<div class="row">
<div class="col-md-8">
<%= carousel_for(gallery.image, alt: "gallery.image_alt") %>
</div>
<div class="col-md-4 colored">
<p class='medium-text'><%= gallery.image_description %></p>
</div>
</div>
<% end %>
我有一个项目模型和一个画廊模型。关联是：
I have a projects model and a gallery model. The associations are:
Project.rb
Project.rb
has_many :galleries
accepts_nested_attributes_for :galleries, reject_if: :all_blank, allow_destroy: true
Gallery.rb
Gallery.rb
belongs_to :project
图库表具有：image属性。
The Gallery table has an :image attribute.
我想轮播每个图像。
该教程并没有说明如何插入转盘插入其他模型，所以我不确定是否需要以某种方式将其合并到画廊或项目模型中。
The tutorial doesnt go as far as showing how to plug the carousel in to other models, so I'm not sure if I need to incorporate it somehow in the gallery or project models.
目前，如果我尝试这样做，我看到一条错误消息：
At the moment, if I try this, I get an error that says:
wrong number of arguments (given 2, expected 1)
该消息突出显示了帮助程序的这一行：
The message highlights this line of the helper:
def carousel_for(images)
任何人都可以看到下一步该怎么做
Can anyone see what the next steps are to get this working?
PRAVESH的建议
根据Pravesh的建议，我尝试了以下方法。我必须评论image_description标题，因为它给出了未定义的方法错误（image_description是我的图库表上的一个属性。我不知道如何实现此建议以使轮播正常工作。充其量，它只是显示了指向图片链接（我认为至少是这样）。控件不起作用，后续图片/路径也不显示。
Taking Pravesh's suggestion, I tried the following. I had to comment image_description caption because it was giving an undefined method error (image_description is an attribute on my gallery table. I can't figure out how to implement this suggestion to get the carousel working. At best it just shows a text path to an image link (i think thats what it is at least). The controls don't work and the subsequent images/paths don't show.
<% if @project.galleries == @project.galleries.order(created_at: :asc).first%>
<div class="item active">
<%= carousel_for(@project.galleries) %>
<div class="carousel-caption">
<p class='medium-text'><%#= @project.galleries.image_description %></p>
</div>
</div>
<% else %>
<div class="item">
<%= carousel_for(@project.galleries) %>
<div class="carousel-caption">
<p class='medium-text'><%#= @project.galleries.image_description %></p>
</div>
</div>
<% end %>
PRAVESH的第二建议
<% @project.galleries.order(created_at: :asc).each do |gallery| %>
<% if gallery == @project.galleries.order(created_at: :asc).first%>
<div class="item active"> //since you need the first image as active
<%= carousel_for(gallery.image) %>
<div class="carousel-caption">
<p class='medium-text'><%= gallery.image_description %></p>
</div>
</div>
<% else %>
<div class="item"> // for the rest of the images
<%= carousel_for(@project.galleries.order(created_at: :asc)) %>
<div class="carousel-caption">
<p class='medium-text'><%= gallery.image_description %></p>
</div>
</div>
<% end %>
<% end %>
给出此错误：＃
与我刚开始使用的是相同的
Which is the same one that I started out with
推荐答案
您在此处发送了两个参数
You were sending two arguments here
<%= carousel_for(gallery.image, alt: "gallery.image_alt") %> // alt is the second parameter here
但是它仅需要gallery.image作为参数。这就是为什么您会收到这样的错误的原因：
however it needs only gallery.image as parameters. That is why you were getting an error like this:
wrong number of arguments (given 2, expected 1)
，在您看来：
<% @project.galleries.order(created_at: :asc).each do |gallery| %>
<% if gallery == @project.galleries.order(created_at: :asc).first%>
<div class="item active"> //since you need the first image as active
<%= carousel_for(gallery.image) %>
<div class="carousel-caption">
<p class='medium-text'><%= gallery.image_description %></p>
</div>
</div>
<% else %>
<div class="item"> // for the rest of the images
<%= carousel_for(gallery.image) %>
<div class="carousel-caption">
<p class='medium-text'><%= gallery.image_description %></p>
</div>
</div>
<% end %>
<% end %>
</div>
新尝试：
<div class="item"> // for the rest of the images
<%= carousel_for(@project.galleries.order(created_at: :asc)) %>
</div>
尝试2
在您的控制器中
@image_urls=[]
@project.galleries.each do |gallery|
@image_urls.push(gallery.image.url) // if you are using paperclip for image upload
end
在您看来
删除每个块的整体内容，仅添加以下行
delete the whole do each block and only add the below line
<%= carousel_for(@image_urls) %>
我相信这会有所帮助，对我来说很好
I am sure this gonna help, it works fine for me
这篇关于Rails 4-轮播助手-图片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
