1

カルーセルに30以上の画像を表示する必要があります-twitterブートストラップ。そこでiveはあちらで述べたようにコードを書きました。1つの画像を表示するためのコードは次のとおりです。

<div id="carousel" class="carousel">
  <div class="carousel-inner">  
    <div class="item active">
      <%= image_tag('1.JPG',:size => '600x400', :alt => "College Building") %>
    <div class="carousel-caption"></div>
  </div> 
</div>

上記のhtmlコードは、カルーセルで1つの画像を表示するためのものです。同様に、他の画像についても、他の画像の名前で同じコードを再度記述する必要があります。私の質問は、複数の画像を表示するためのコードをルビーでどのように書くかということです。私は次のような配列を使用してみました

# in controller
@image["1.jpg","2.jpg",...] 
@image.each do|n|

# in HTML page
<%=image_tag("n",:size => '600x400')%>

私は初心者なので、可能であればコードを説明してください。

4

2 に答える 2

2

あなたのコードは正しい軌道に乗っているようです:

コントローラ：

# You have to assign the array to the @images variable
@images = [ "1.jpg", "2.jpg", ... ]

意見： 

<% @images.each do |n| %>

  <%

  # You have to use the `n` variable, not the literal
  # string "n" that you used in your sample code. Notice
  # the lack of quotes here:

  %>

  <%= image_tag( n, :size => '600x400' ) %> 

<% end %>

画像ファイル名以外の追加情報を保存できるように、ハッシュの配列を割り当てたい場合があります。例:

コントローラ：

@images = [

  { 'file' => "1.jpg", 'alt' => "College Building" },

  { 'file' => "2.jpg", 'alt' => "Something else" }

]

意見：

<% @images.each do |image| %>

  <%= image_tag(

    image[ 'file' ], :size => '600x400', :alt => image[ 'alt' ]

  ) %>

<% end %>
于 2012-08-04T22:43:39.353 に答える
0

  1. 私は通常、assets/images フォルダー内のすべてのカルーセル画像を読み込み、名前の最後に「c」文字を付けます。(例えば、towerc.jpg)。好きなだけロードできます。

  2. 最初の画像がwelcome.jpgであると仮定します（通常、少なくとも私の場合は画像/テキストの組み合わせであるため）。

  3. フォルダからすべての適格な写真を含む変数（私の場合は@pics）をロードします）

  4. ビュー内の配列を通過して画像を表示します。

  5. 高さと幅の # で遊ぶことを忘れないでください (xxx, yyy)

    <!--  file names ending with c.(jpg,png,gif,jpeg) are carousel only-->
<!--  welcome.jpg is first active file, usually something special.-->


        <div class="active item">
      <%= image_tag("welcome.jpg", :width=>"xxx", :height=>"yyy")%>
    </div>

    <% @pics.each do |photos| %>
        <div class="item">
          <%= image_tag(photos[18..photos.length], :width=>"xxx", :height=>"yyy")%>
        </div>          
    <% end %>

  </div>

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&saquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&aquo;</a>
</div>

ところで、画像を assets/images フォルダーに保存し、そこから取得する必要があることを強調しようとしているだけで、JMM ソリューションは機能するはずです。

于 2012-08-07T17:53:25.633 に答える