Javascript 由于错误，无法在fancybox2 rails gem中使用帮助程序

我正在尝试让fancybox2在我的RoR应用程序上正常工作。我尝试了gem，只是将文件直接放在我的资产目录中，但我无法让助手工作

现在拇指（由助手生成）不会显示。 此外，当光标在覆盖层上时，覆盖层似乎不是透明的，因为它们应该是透明的。请参见图像和：

问题是：我做错了什么

使用以下文件夹中的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

欢迎光临

(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是否被覆盖。谢谢您的帮助。

可能是起重问题：

fancybox js文件应该在helpers文件之前加载，这样你的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>

。。。因此，它适用于所有锚点，包括fancybox的（箭头/关闭）锚点。避免全局声明，而是使用特定性，如：

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

。。。或

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

---

谢谢你的回复。嗯，我不喜欢这些问题。。。我还使用引导，它必须设置a:hover。。我在CSS中也看到了它：“a:hover{color:#157ab5；文本装饰：下划线我想我必须弄清楚如何在我自己的CSS中覆盖这个文件……为了顺序……使用require_树有点困难。我应该单独指定文件夹吗？或者gem会更好地处理这个问题吗？

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

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