在滑軌上顯示原始照片

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 desactivated（點擊該鏈接會打開一個新標籤的完整圖像）。由於您沒有加載所有完整的圖片（只是爲了隱藏它們），您的網頁加載時間也可能會減少。

Answer 2

你必須使用類 「拇指」 除了ID。因爲id是uniq所以只有第一次工作。

與「彈出」 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>