jquery - レールからプルされた画像を含む jQuery スライドショーが機能しない

Question

Rails 3.2 でスライドショーを実装しようとしていますが、うまくいきません。このチュートリアルhttp://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htmに従おうとしましたが、Rails と jQuery が初めてなので、コマンドを適用して画像を呼び出す方法が完全にわかりません。データベース。

したがって、皆さんが私を助けてくれれば、本当に感謝しています。

これまでのところ、すべての画像 (上部に 1 つのメイン画像と下に 4 つの小さな画像 (メインの画像 + 他の 3 つの画像)) がデータベースから呼び出され、Web ページに正しく表示されますが、スライドショーを適用して作成したいと思います。それはより良く見えます。下の小さな画像にカーソルを合わせると、メインの画像として上部に表示されます。

それは私が持っているコードです:

アプリ/ビュー/ホーム/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> 

アプリ/アセット/JavaScript

$(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;
        });
    };