레일에서 이미지를 가져온 jQuery 슬라이드 쇼가 작동하지 않습니다.

Question

레일 3.2에서 슬라이드 쇼를 구현하려고하는데 행운이 없습니다. 이 튜토리얼 http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm을 따르려고했지만, Rails와 jQuery에 익숙하지 않아서 데이터베이스에서 이미지를 호출하는 명령을 적용하는 방법을 완전히 잃어 버렸다.

따라서 여러분이 저를 도와 줄 수 있다면 정말 감사드립니다.

지금까지 모든 이미지 (상단의 주 이미지와 4 개의 작은 이미지 (기본 주 + 3 기타))가 데이터베이스에서 호출되어 웹 페이지에 올바르게 표시되었지만 슬라이드 쇼를 적용하고 싶습니다 더보기 좋게 만들기 위해서. 아래의 작은 이미지 위로 마우스를 가져 가면 맨 위의 주 그림으로 표시됩니다.

응용 프로그램/뷰/가정/show.html.erb를

<div class="homepics"> 
    <div class="homemainpic"> 
    <%= image_tag "/"+@home.images[0].image_path, :size => "925x600" %> 
    </div> 
    <ul> 
    <% @home.images.each {|image| %> 
    <li><%= image_tag "/"+image.image_path, :size => "220x150" %></li> 
    <% } %> 
    </ul> 
</div> 

응용 프로그램/자산/자바 스크립트가

$(document).ready(function() { 

    $(".homemainpic li image_tag").hover(function() { 
     $('image_tag').attr('src', $(this).attr('src').replace('image_tag "/"+image.image_path')); 
    }); 

    var imgSwap = []; 
     $(".homemainpic li image_tag").each(function() { 
      imgURL = this.src.replace('image_tag "/"+image.image_path'); 
      imgSwap.push(imgURL); 
    }); 

    $(imgSwap).preload(); 
}); 

    $.fn.preload = function() { 
     this.each(function() { 
      $('image_tag "/"+@home.images[0].image_path') [0].src = this; 
     }); 
    }; 

Answer 1

이 시도 : 코드 내가 가진 것

:

$(".homepics ul img").on('mouseover', function() { 
    $('.homemainpic img').attr('src', $(this).attr('src')); 
}); 

Fiddle