Изменить изображение без обновления или перезагрузки страницы

Question

Я использую это руководство.

http://jsfiddle.net/nz8qy41y/

Проблема: Когда я нажимаю на [1] [2] или [3] основное изображение не меняется. Вместо этого я перенаправлен на изображение.

Просмотреть. Основное изображение:

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

<a href=<%=@advertisement.pictures.first.image.url(: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')); 
    }); 
}); 

Теперь, когда я нажимаю на небольших изображений он связывает с правом изображения, но и в других целях. Мне нужно изменить изображение в том же представлении.

Любая помощь?

Спасибо.

Answer 1

Это была моя ошибка.

У меня был дублирующий код сценария внутри Application.js, который перепутал все.

Answer 2

включает JQuery, если он не входит в в JQuery

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

но с тем, как его лучше ввести полный путь для ваших изображений в HTML

Answer 3

Pure вариации 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")); 
    }); 
}