0

我正在尝试让 fancybox2 在我的 RoR 应用程序上正常工作。我已经尝试过 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

欢迎.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 文件应该在 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>

应该 ：

<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>

还要检查您的路径以避免 404 错误，因为您正在加载您的 css 文件，fancybox/helpers/而 js 文件来自fancybox/（helpers css 和 js 文件通常位于子目录“ helpers ”下）

关于closeandarrows按钮中的黑色背景/覆盖，很可能您使用的是全局 css 规则，例如：

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

...因此它适用于所有锚点，包括花式框的（箭头/关闭）锚点。避免全局声明并使用特殊性，例如：

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

... 或者

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