Schienen: Bild bei Klick ändern, wenn Bild-URL dynamisch ist

Question

Ich benutze Rails 4 und habe eine Seite mit einem großen Bild und 6 Thumbnails. Wenn ein Benutzer auf eines der Miniaturbilder klickt, sollte das große Bild zu einem der angeklickten Miniaturbilder wechseln.

in meiner 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> 

ich verwendet, um Bilddateien in app/assets/images zu haben und implementiert diese Funktion mit jQuery. In 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'); 
    }); 
}); 

Wie kann ich erreichen, dass, wenn die Bild Urls dynamisch sind?

app/Helfer/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

Wie Hardik schlug ich gerade in meinem js-Code, um die Bilder Array mit dem Miniaturbild Urls ersetzen könnte:

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

I misleadingly hatte etwas mit vorkompilierten Inhalten im Hinterkopf, als ich fragte. Danke Hardik, dass er mich in die richtige Richtung gelenkt hat!