Question

您好我正在浏览上传的照片并显示缩略图。当有人点击缩略图时，我正在尝试显示原始照片。问题是它只适用于循环中的第一个缩略图。我是否需要为每个缩略图指定个人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>

谢谢：）

Answer 1

试试这个：

<% @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被取消激活时，它会优雅地降级（单击链接将在新选项卡中打开完整图像）。由于您没有加载所有完整图像（只是为了隐藏它们），您的页面加载时间也可能会减少。

Answer 2

你必须使用除“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>

在单击Rails上显示原始照片

2 个答案: