更改圖像不刷新頁面或重新加載

問題： 當我點擊[1] [2]或[3]主圖像沒有改變。相反，我被重定向到圖像。

查看。主要形象：

<div class="block-2-image"> 

<a href=<%[email protected](:original)%> data-lightbox="gallery"><%= image_tag @advertisement.pictures.first.image.url(:medium), 
    :title=> @advertisement.name,:id=>"main-image", :alt =>         @advertisement.name%></a> 

</div>

的縮略圖：

<ul class="thumbnail"> 
    <% @advertisement.pictures.to_enum.with_index(1) do |thumb, index|%> 


     <li><a href=<%=thumb.image.url(:medium)%>><%= index %></a></li> 


    <% end %> 
</ul>

腳本：

$(document).ready(function(){ 
    $('.thumbnail li').on('click',function(){ 
     $('.block-2-image a').find('img').attr('src', $(this).attr('src')); 
    }); 
});

現在，當我點擊它鏈接到正確的圖像，但在其他視圖的小圖片。我需要在同一視圖中更改圖像。

任何幫助？

謝謝。

來源

2015-01-02 Edgars

'也許只是改變圖像路徑，當點擊這些數字圖像發生？'雅試試 –

這樣的東西[小提琴] –

@BogdanKuštanTnx。但是我的代碼不會改變主圖像，它只是重定向到正確的圖像路徑。與腳本的東西？ – Edgars

這是我的錯誤。

我在Application.js中有重複的腳本代碼混淆了一切。

來源

2015-01-02 20:53:17 Edgars

包括jQuery的，如果它不包括在jQuery的

$(document).ready(function(){ 
    $('.thumbnail li img').on('click',function(){ 
     $('.block-2-image').find('img').attr('src', $(this).attr('src')); 
    }); 
});

但這樣它能夠更好地在HTML中鍵入您的圖像的完整路徑

來源

2015-01-02 16:23:47

純JS變化@穆罕默德的答案（未測試）：

window.onload = function() { 
    var selector = document.querySelector(".thumbnail li img"); 
    selector.addEventListener("click", function() { 
     var img = document.querySelector(".block-2-image img"); 
     img.setAttribute("src", selector.getAttribute("src")); 
    }); 
}

來源

2015-01-02 17:02:11 eatonphil

謝謝。但想法是避免在該選擇中使用小縮略圖。我有不同的圖像代表圖像編號不是縮略圖。 – Edgars

對不起，你能改述一下嗎？我仍然想念我錯過的東西。 – eatonphil

@eatonphill您的代碼將主圖像更改爲縮略圖，但我不需要。我需要點擊四個小圖像中的一個，然後從其他路徑更改主圖像。 – Edgars

更改圖像不刷新頁面或重新加載

回答

相關問題