Question

我使用Rails 4并且页面包含一个大图像和6个缩略图。当用户单击其中一个缩略图时，大图像应更改为单击的缩略图之一。

在我的app / views / products / show.html.erb中：

   <div class="product-teaser-column">
     <%= image_tag product_image_url(@product, type: :three_quarter, color: colors.first), itemprop: "image", class: 'teaser' %>
   </div>        

   <div class="product-thumbnail-column">
      <ul class="product-thumbnails" class "thumbnails inline">
        <% type_map.except(:thumb, :reversiblefront).each_with_index do |type, index| %>
        <li class='thumbnail'>
      <%= image_tag product_image_url(@product, type: type, color: colors.first), itemprop: "image", class: 'thumbnail' %>
        </li>
        <% end %>
      </ul>
    </div>

我以前在app / assets / images中有图像文件，并用jQuery实现了这个功能。在app / assets / javascripts / application.js中：

// change teaserimage on thumbnail-click
$(function() {
  var images = [
    "/assets/Nile_1_16_0119.jpg", "/assets/Nile_1_16_0095.jpg",
    "/assets/Nile_1_16_0131.jpg", "/assets/Nile_1_16_0144.jpg",
    "/assets/thumb_midnight.jpg", "/assets/back_midnight.jpg"
  ];

  $(".thumbnail").click(function() {
    var index = $(this).parent().index();
    $('img.teaser').attr('src', images[index]);
    $(this).parent().siblings().removeClass('active');
    $(this).parent().addClass('active');
  });
});

如果图片网址是动态的，我该如何实现？

应用程序/助手/ products_helpers.rb：

module ProductsHelper
  def product_image_url(product, type:, color:)
    source = URI.escape "#{product_image_base_url}/#{collection_folder(product)}/"\
                        "#{product_number(product)}_#{product_type(type)}"\
                        "_#{format_color_name(color.name)}.jpg"
    image_exist?(source, product) ? source : false
  end

  def product_image_base_url
    ENV['PRODUCT_IMAGE_BASE_URL']
  end

  def product_number(product)
    product.number.strip.upcase
  end

  def product_type(type)
    type_map.fetch(type)
  end

  def type_map
    @type_map ||= {
      full: "01",
      three_quarter: "02",
      medium: "03",
      close_up: "04",
      front: :front,
      back: :back,
      thumb: :thumb,
      reversiblefront: :reversiblefront
    }
  end
end

Answer 1

就像Hardik建议我可以在我的js-code中用缩略图图片替换图像数组：

var productImages = $("img.thumbnail").map(function() {
    return this.src;
}).get();

当我问起时，我误解了预编译资产的问题。感谢Hardik指导我走向正确的方向！

rails：当图片网址是动态时，点击时更改图片

1 个答案: