0

いくつかのサムネイルがあります。クリックすると、その画像が .big-img に表示されます。fancybox-rails を使用して、その画像をフルサイズで表示します。それはうまくいきますが、私の問題は、選択したサムネイルをfancyboxで表示することです。現在、パスは最初の画像にしか通じていないため、big-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.コーヒー

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

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

1 に答える 1

1

私はcoffescriptもrailsも知りませんが、あなたのコードを見ると、このスクリプトは

<%=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を参照してください

于 2013-08-09T18:27:26.683 に答える