Question

我正在尝试让fancybox2在我的RoR应用上正常工作。我已经尝试过gem并将文件直接放在我的assets目录中，但是我无法让帮助程序工作。

现在拇指（由帮手生成）不会出现。此外，当cursus在它上面时，覆盖层似乎不是透明的，正如它们应该的那样。查看图片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是否在某处被覆盖。谢谢你的帮助。

Answer 1

可能是一个悬挂问题：

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>

同时检查路径以避免404错误，因为从fancybox/helpers/加载css文件而来自fancybox/的js文件（帮助程序css和js文件通常在子目录“帮助程序下“）

关于close和arrows按钮中的黑色背景/叠加层，您很可能正在使用全局css规则，如：

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

...所以它适用于所有锚点，包括fancybox（箭头/关闭）锚点。避免全局声明和使用特异性，如：

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

......或

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

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

1 个答案: