帶圖像標題的滑軌滑塊

Question

我試圖按照本教程將圖像庫集成到我的Rails 4應用程序中。

https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel

我以前有一個其中有我想要在我想要的方式來顯示屬性，但我不能得到控制工作。

使用本教程，我可以有控制，但我不知道如何將我想要顯示的標題文本與圖像集成。

我有模型叫做項目和圖庫。該協會是：

Project.rb

has_many :galleries 
     accepts_nested_attributes_for :galleries, reject_if: :all_blank, allow_destroy: true 

Gallery.rb

belongs_to :project 

在我的畫廊表的屬性有：

image    :string 
image_alt   :string 
image_description :text 
image_credit  :string 
project_id  :integer 

在介紹之後，我添加了傳送帶幫手：

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 

在我的項目控制器我有：

def show 

    @project = Project.find(params[:id]) 
    @image_urls=[] 
     @project.galleries.each do |gallery| 
     @image_urls.push(gallery.image.url) 
     end 

    end 

我不知道是什麼在該方法中提及的「推」的意思。有人幫我在這個崗位：

Rails 4 - carousel helper - image gallery

• 他們使用回形針 - 我不使用（我有carrierwave），但此行不會導致錯誤。

然後在我的項目顯示，我有：

<%= carousel_for(@image_urls) %> 

我無法弄清楚如何將標題，圖片的alt和圖像信用添加到圖像。

如果我將它添加到carousel_for的括號內，我得到一個錯誤，說只有一個預期的屬性。即使如此，如果這樣做，我將如何格式化這些元素？

任何人都可以幫忙嗎？

Answer 1

試試這個

在控制器

def show 
    @project = Project.find(params[:id]) //this will give you only one object 
    @allimages = Project.galleries.all // this will give you many objects 
end 

您認爲通過

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:520px; margin-bottom: 100px; background: #d1dbde;"> 

<div class="carousel-inner" role="listbox"> 
    <% @allimages.each do |gallery| %> 
     <% if gallery == @allimages.first%> 
     <div class="item active"> 
     <%= image_tag(gallery.image.url, :class => "carousel_image") %> 
      <div class="carousel-caption image_caption"> 
      <h3><strong><%= link_to(gallery.title , image_path(gallery.id))%></strong></h3> 
      <h4><%= truncate(gallery.body, length: 75) %></h4>   
      </div> 
     </div> 
     <% else %> 
     <div class="item"> 
     <%= image_tag(gallery.image.url, :class => "carousel_image") %> 
      <div class="carousel-caption image_caption"> 
      <h3><strong><%= link_to(gallery.title , image_path(gallery.id))%></strong></h3> 
      <h4><%= truncate(gallery.body, length: 75) %></h4>   
      </div> 
     </div> 
    <% end %> 
    <% end %> 
</div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

替換您的自定義CSS文件

.carousel_image{ 
    height: 450px !important; 
    margin: 0 auto; 
    padding-top: 20px; 
    padding-bottom: 100px; 
} 
.image_caption{ 
    top: 72%; 
}