Question

我正在尝试在Rails 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>

应用/资产/ 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;
        });
    };

Answer 1

试试这个：

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

Fiddle

带有从rails中拉出的图像的jQuery幻灯片放映不起作用

1 个答案: