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.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
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>标签 with 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 回答