Question

我尝试按照本教程在我的Rails 4应用中集成图库。

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

我之前有一个具有我希望以我想要的方式显示的属性，但我无法使控件生效。

使用本教程，我可以拥有控件，但我无法弄清楚如何将我想要显示的标题文本与图像集成。

我有名为Project and Gallery的模型。协会是：

Project.rb

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

Gallery.rb

belongs_to :project

我的gallery表中的属性是：

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

我不知道引用＆＃34;推送＆＃34;在那个方法意味着。有人在这篇文章中帮助过我：

Rails 4 - carousel helper - image gallery

他们使用回形针 - 我不使用（我有载波），但这行不会导致错误。

然后在我的项目展示中，我有：

   <%= 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%;
}

Rails滑块与图像标题

1 个答案: