0

twitter-bootstrap を使用して Rails アプリで 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>

アプリケーション.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
4

2 に答える 2

0

問題はeachループにあると思います。ループ内に 2 つの終了タグがあることに気付いた場合は、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をご覧ください。代替キャプション オプションの例がさらにあります。

于 2013-02-08T18:34:42.087 に答える
0

この問題の非常に簡単な修正を見つけました。

従来の CMS を使用しており、スライダーのいくつかの画像の横に画像マップ タグを挿入しています (空白のスライドになります)。無関係な要素を無視するだけでもうまくいくようです。

ファイルの 36 行を置き換えますjquery.nivo.slider.js//スライダーの子を見つけます

これを交換

36 - var kids = slider.children();

と

36 - var kids = slider.children("img,a");

変更を保存し、ブラウザをリロードして問題を解決してください。

詳細については、github gilbitron / Nivo-Sliderを参照してください。

于 2013-02-08T20:17:29.853 に答える