我正在尝试在 Rails 3.2 中实现幻灯片,但没有运气。我尝试按照本教程http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm进行操作,但是由于我是 Rails 和 jQuery 的新手,我完全不知道如何应用命令来调用图像数据库。
因此,如果你们能帮我解决这个问题,我真的很感激。
到目前为止,所有图像(顶部的一个主图像和 4 个小图像(主要的一个 + 3 个其他))都从数据库中调用并正确显示在网页上,但我想对其应用幻灯片来制作它看起来更好。通过将鼠标悬停在下面的较小图像上,它们应显示为顶部的主图片。
这就是我的代码:
应用程序/views/homes/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>
应用程序/资产/javascripts
$(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;
});
};