更改图片，不刷新页面或重新加载页面 [英] Change image without page refresh or reload

问题描述

我正在使用本指南。

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％GT;< / A> 
 
< / div> b 
 
 
 
缩略图：
 < ul class =thumbnail> 
 <％@ advertisement.pictures.to_enum.with_index（1）do | thumb，index |％> 
 
 $ b< li>< a href =<％= thumb.image.url（：medium）％>><％= index％>< /一个>< /锂> 
 
 
<％end％> 
< / ul> 
  

脚本：



 < $（$。$ document $。$> $（document。）.ready（function（）{
 $（'。thumbnail li'）。on（'click'，function（）{
 $（'。block-2 -image a'）。find（'img'）。attr（'src'，$（this）.attr（'src'））; 
}）; 
}）; 
  

现在当我点击小图片时，它会链接到正确的图片，但是在其他视图中。
我需要在同一个视图中更改图片。

有什么帮助吗？

谢谢。

解决方案

这是我的错误。在Application.js中重复的脚本代码混淆了一切。

I am using this guide.

http://jsfiddle.net/nz8qy41y/

Problem: When I click on [1] [2] or [3] main image is not changing. Instead I am redirected to image.

View. Main image:

<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>

Thumbnail images:

<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>

Script:

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

Now when I click on small images it links to right image, but in other view. I need to change image in the same view.

Any help ?

Thanks.

解决方案

It was my mistake.

I had duplicate script code inside Application.js that mixed up everything.

这篇关于更改图片，不刷新页面或重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！