jQuery幻燈片與從軌道拉的圖像不起作用

我想在Rails 3.2中實現幻燈片，但沒有運氣。我試圖按照這個教程http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm，但由於我是Rails和jQuery的新手，我完全喪失瞭如何應用命令從數據庫調用圖像。jQuery幻燈片與從軌道拉的圖像不起作用

因此，我真的很感激，如果你們可以幫我拿到它排序。

到目前爲止，從數據庫中調用了所有圖像（頂部和小於4的小圖像（主要1 + 3其他圖像）），並正確顯示在網頁上，但我想應用幻燈片放映使它看起來更好。通過將鼠標懸停在下面的較小圖像上，它們將作爲主圖像顯示在上面。

這是我的代碼有：

應用程序/視圖/家庭/ show.html.erb

<div class="homepics"> 
    <div class="homemainpic"> 
    <%= image_tag "/"[email protected][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 "/"[email protected][0].image_path') [0].src = this; 
     }); 
    };

來源

2013-04-08 Ron

試試這個：

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

Fiddle

來源

2013-04-08 06:41:15 pdoherty926

Thanks @ethagnawl。你的意思是隻替換代碼的前兩行，並留下剩下的部分？或用'.homepics ul img'替換所有'.homemainpic li image_tag'，並用'.homemeinpic img'替換當前所有'image_tag'？ – Ron 2013-04-08 13:02:56

你是一個英雄！我只替換了前兩行，它像一個魅力。非常感謝。 – Ron 2013-04-08 22:18:11

對不起，羅恩，但我今天沒有機會回答你的問題。我很高興你能解決問題。 :) – pdoherty926 2013-04-08 23:25:13

jQuery幻燈片與從軌道拉的圖像不起作用

回答

相關問題