Question

我开始测试bootstrap。到目前为止一切顺利，我唯一的问题是，当我想在带有轮播的模态窗口中显示图像时，始终显示相同的图像（第一张图像）。

应用程序的想法是用他们的图像显示不同的产品，当用户点击产品时，打开一个模态窗口并显示所有产品照片。问题是模态窗口始终显示相同的图片，始终显示第一个产品的第一个图像，但选择了不同的产品。

产品有很多图像。

product.rb

class Product < ActiveRecord::Base
  has_many :images
  accepts_nested_attributes_for :images, allow_destroy: true
end

image.rb

class Image < ActiveRecord::Base
  belongs_to :product
end

products_controller.rb

class ProductsController < ApplicationController
  before_action :set_product, only: [:show, :edit, :update, :destroy]

  # GET /products
  # GET /products.json
  def index

    @products = Product.by_tipo_and_price(params[:tipo], params[:min], params[:max]).paginate(:page => params[:page], :per_page => 9)
  end
end

index.html.erb

<%- model_class = Product -%>

<div class="page-header">
  <h1>Productos</h1>
</div>

<div class= "row">
  <% @products.each do |product| %>
    <div class="col-sm-6 col-md-4">
      <div class="thumbnail">

        <!-- Button trigger modal -->
        <% if product.images.empty? %>
          <img data-src="holder.js/160x120" alt="" src="" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#myModal">
        <% else %>
          <img data-src="holder.js/160x120" alt="" src="<%= product.images.first.link %>" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#myModal">
        <% end %>

        <div class="caption" style="min-height:200px;height:200px;">
          <h3><%= product.name %></h3>
          <p>ARS $ <%= product.price %></p>
          <p>
            <a class="btn btn-primary" role="button">Añadir al carrito</a>
            <a role="button"><%= link_to "Modificar", edit_product_path(product), class: "btn btn-primary" %></a>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-body">

                    <!-- CAROUSEL -->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <% product.images.each do |i| %>
                          <div class="item active">
                            <img src="<%= i.link %>" alt="...">
                            <div class="carousel-caption">
                              <%= product.id %>
                            </div>
                          </div>
                        <% end %>
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </p>
        </div>
      </div>
    </div>
  <% end %>
</div>

<%= will_paginate %>

<!-- Modal -->
<%= link_to t('.new', :default => t("helpers.links.new")),
    new_product_path,
    :class => 'btn btn-primary' %>

Answer 1

解决。

<img data-src="holder.js/160x120" alt="" src="<%= product.images.first.link %>" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#<%= product.id %>">


<div class="modal fade" id="<%= product.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

在Bootstrap Carousel

1 个答案: