Показать правильное изображение с coffeescript fancybox-rails

Question

У меня есть несколько эскизов, когда вы нажимаете на них, чтобы изображение отображалось в .big-img. Я использую fancybox-rails для отображения этого изображения в полноразмерном виде. Это отлично работает, но теперь проблема заключается в том, чтобы отобразить выбранный эскиз с помощью fancybox. Прямо сейчас путь ведет только к первому изображению, поэтому независимо от того, какая миниатюра отображается в большом img, отображается только первое изображение с fancybox.

html.erb

<%=link_to (@product.images.first.url), :class => 'fancyframe', :rel => 'group' do %> 
    <div class="big-img"> <%= image_tag(@product.images.first.url) %></div> 
<% end %> 

<% if @product.images.count > 1 %> 
    <% @product.images.each do |image| %> 
     <%= link_to image_tag((image.url), :class => 'thumb')%> 
    <% end %> 
<% end %> 

js.coffee

jQuery -> $(".thumb").click -> 
    val = $(this).attr("src") 
    $(".big-img").html "<img src=\"" + val + "\" />" 
    return false; 

jQuery -> 
$(".fancyframe").fancybox 
    type: "iframe" 
    width: 900 
    height: 1000   

Answer 1

Я не знаю ни coffescript или рельсов, но глядя на ваш код я думаю, что этот сценарий

<%=link_to (@product.images.first.url), :class => 'fancyframe', :rel => 'group' do %> 
    <div class="big-img"> <%= image_tag(@product.images.first.url) %></div> 
<% end %> 

отображает html как это (в конце это то, что имеет значение)

<a href="{image FIRST URL}" class="fancyframe" rel="group"> 
    <div class="big-img"> 
     <img src="{image FIRST URL}" /> 
    </div> 
</a> 

Затем этот сценарий

jQuery -> $(".thumb").click -> 
    val = $(this).attr("src") 
    $(".big-img").html "<img src=\"" + val + "\" />" 
    return false; 

... изменяет уменьшенное изображение (<img /> тег) внутри контейнера <div class="big-img"> но href родительской ссылки (<a> тег с class="fancyframe") по-прежнему указывает на первый URL изображения.

Вы также должны изменить href селектора .fancyframe как

jQuery -> $(".thumb").click -> 
    val = $(this).attr("src") 
    $(".big-img").html "<img src=\"" + val + "\" />" 
    $(".fancyframe").attr("href", val); // write this in coffescript format 
    return false; 

См JSFIDDLE