0

嗨，我正在循环浏览上传的照片并显示缩略图。当有人点击缩略图时，我正在尝试显示原始照片。问题是它只适用于循环中的第一个缩略图。我是否需要给每个缩略图一个单独的 id 或者我怎样才能让它在每个缩略图上工作？有小费吗？:)

我的节目：

    <% @project.assets.each do |asset| %>
      <% if asset.photo.file? %>
        <li class="thumbnail col-md-2">
           <a id="thumb" href="#">
             <%= image_tag asset.photo.url(:thumb)  %>
           </a>
        </li>
      <% end %>
        <div id="popup">
          <%= image_tag asset.photo.url(:original) %>
        </div>
    <% end %>

我的JavaScript：

<script type="text/javascript">
$(document).ready(
    function() {
        $("#thumb").click(function() {
            $("#popup").toggle();
        });
    });
</script>

谢谢 ：）

4

2 回答 2

3

尝试这个 ：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <%= link_to asset.photo.url(:original), class: :popup_link, target: :_blank do %>
         <%= image_tag asset.photo.url(:thumb)  %>
       <% end %>
    </li>
  <% end %>
<% end %>

<div id="popup"></div>

<script type="text/javascript">
  $(document).ready(function() {
     $(".popup_link").click(function(e) {
        e.preventDefault();
        $("#popup").html( $('<img>').attr('src', this.href) );
     });
  });
</script>

我们在这里所做的是，在点击时，我们用一个图像标签填充弹出 div，其 src 属性是点击链接的 href 属性值。

这种方法的好处是当 javascript 被停用时它会优雅地降级（单击链接将在新选项卡中打开完整图像）。由于您没有加载所有完整图像（只是为了隐藏它们），因此您的页面加载时间也可能会减少。

于 2013-10-24T11:59:54.327 回答
1

您必须使用除 id 之外的类“thumb”。因为 id 是 uniq 所以只有第一次工作。

与“popup” id 相同，因为总是会显示第一张图片。所以你可以像这样：

<% @project.assets.each do |asset| %>
  <% if asset.photo.file? %>
    <li class="thumbnail col-md-2">
       <a id="asset-#{asset.id}" class="thumb" href="#">
         <%= image_tag asset.photo.url(:thumb)  %>
       </a>
    </li>
  <% end %>
    <div id="popup-asset-#{asset.id}">
      <%= image_tag asset.photo.url(:original) %>
    </div>
<% end %>

<script type="text/javascript">
$(document).ready(
    function() {
        $(".thumb").click(function() {
            $("#popup-" + this.attr("id")).toggle();
        });
    });
</script>
于 2013-10-24T11:52:48.913 回答