更改图像不刷新页面或重新加载

问题： 当我点击[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

更改图像不刷新页面或重新加载

回答

相关问题