Nivo Slider,显示图像一个在另一个之上(没有任何“滑动”)
问题描述:
我试图在导轨应用程序中使用twitter-bootstrap设置Nivo Slider,我面对的问题是tha图像出现在其他不滑动的顶部,任何想法如何解决这个问题?Nivo Slider,显示图像一个在另一个之上(没有任何“滑动”)
这里是我的代码:
负荷NIVO滑块:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% @page.images.each_with_index do |img, index| %>
<%= image_tag img.url, :title => '#htmlcaption' %>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<%=raw @page.caption_for_image_index(index) %>
</div>
<% end %>
_javascript.html.erb
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'jquery.nivo.slider.pack' %>
<%= javascript_include_tag 'jquery.nivo.slider' %>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
pauseTime: 5000,
directionNav:true,
controlNav:true
});
});
</script>
的application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
答
我相信问题来自于each
循环。如果你注意到循环内部,你有两个关闭div
标签 - 只是在这条线<%= image_tag img.url, :title => '#htmlcaption' %>
下面。因此,您打开divs
一次,但多次关闭。
你可以做什么,而不是稍有改变,如代码:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% @page.images.each do |img| %>
<%= image_tag img.url, :title => img.caption_for_image %>
<% end %>
</div>
</div>
看一看Nivo Docs。替代字幕选项还有其他例子。
答
我发现了一个很简单的解决这个问题:
我使用的是传统的CMS而这将旁边的滑块一些图像(导致空白幻灯片)图像映射标签。简单地忽略不相关的元素似乎运作良好。
在你jquery.nivo.slider.js
文件替换线36 //查找我们滑块孩子
替换此
36 - var kids = slider.children();
与
36 - var kids = slider.children("img,a");
保存更改,重新启动浏览器和问题解决。
欲了解更多详情,请访问github gilbitron/Nivo-Slider
嗨@bborisovs,谢谢你的回答然而,当我实现它,我得到一个“未定义的方法img.caption_for_image”的错误,任何想法,为什么? – evanx 2013-02-08 19:28:17
什么是存储标题的“列名称”。这个例子说明列的名字是'caption_for_image'。 – Boris 2013-02-08 19:43:57
列的名称是'标题',但我已经尝试过,并得到相同的错误。 – evanx 2013-02-08 19:54:14