0

RoRアプリでfancybox2を正しく動作させようとしています。gemを試し、ファイルをアセットディレクトリに直接配置しましたが、ヘルパーを機能させることができません。

これで、親指（ヘルパーによって生成された）は表示されません。また、カーサスがその上にあるとき、オーバーレイは透明ではないように見えます。画像1と2を参照してください：

質問は：私は何が間違っているのですか？

現在の出力は、次のフォルダー内のFancyboxファイルで生成されます。

/assets/stylesheets/fancybox/jquery.fancybox-buttons.css
/assets/stylesheets/fancybox/jquery.fancybox.css
/assets/stylesheets/fancybox/jquery.fancybox-thumbs.css

/assets/images/fancybox/fancybox_overlay.png
/assets/images/fancybox/blank.gif
/assets/images/fancybox/fancybox_buttons.png
/assets/images/fancybox/fancybox_loading.gif
/assets/images/fancybox/fancybox_sprite.png

/assets/javascripts/fancybox/jquery.fancybox.pack.js

/helpers/jquery.fancybox-buttons.js
/helpers/jquery.fancybox-media.js
/helpers/jquery.fancybox-thumbs.js

welcome.js

(function() {

  $(document).ready(function() {
    return $(".fancybox-thumb").fancybox({
      prevEffect: "none",
      nextEffect: "none",
      helpers: {
        title: {
          type: "outside"
        },
        thumbs: {
          width: 75,
          height: 75
        }
      }
    });
  });

}).call(this);

出力されたHTML：

...
<link href="/assets/fancybox/jquery.fancybox-buttons.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/fancybox/jquery.fancybox-thumbs.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/fancybox/jquery.fancybox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>
...
<p>
<a class='fancybox1234' href='http://.../uploads/noimage.jpg' rel='group'>
<img alt='' src='http://.../uploads/small_noimage.jpg'>
</a>
<a class='fancybox1234' href='http://.../uploads/Burgum_Hervormde_kerk.JPG' rel='group'>
<img alt='' src='http://.../uploads/small_Burgum_Hervormde_kerk.JPG'>
</a>
</p>
...

私を助けるためにもっと多くの出力や情報が必要な場合は、私に知らせてください。ありがとう！

編集：ヘルパーの順序は確かに彼らを機能させるための解決策でした。ただし、オーバーレイはまだ正しく機能しないため、CSSがどこかでオーバーライドされているかどうかを確認する必要があります。ご協力いただきありがとうございます。

4

1 に答える 1

0

巻き上げの問題である可能性があります：

fancybox jsファイルはヘルパーファイルの前にロードする必要があるため、これではなくhtml出力が必要です。

<script src="/assets/fancybox/helpers/jquery.fancybox-buttons.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-media.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-thumbs.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>

する必要があります：

<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-buttons.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-media.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-thumbs.js?body=1" type="text/javascript"></script>

fancybox/helpers/また、パスをチェックして、からのjsファイルをロードしているときに404エラーを回避しますfancybox/（ヘルパーcssおよびjsファイルは通常サブディレクトリ「helpers」の下にあります）

closeandarrowsボタンの黒い背景/オーバーレイに関しては、次のようなグローバルcssルールを使用している可能性があります。

a:hover { 
 background-color: #000;
}

...したがって、fancyboxの（矢印/閉じる）アンカーを含むすべてのアンカーに適用されます。グローバル宣言を避け、代わりに次のような特異性を使用します。

a.myClass:hover {
  background-color: #000;
}

... また

#myContainer a:hover {
  background-color: #000;
}
于 2013-01-30T21:08:47.730 に答える