Question

在我的Fancybox图库中，我修改了Fancybox CSS以始终显示导航箭头（不仅仅是悬停），并设置不透明度在悬停时从0.7增加到1.0。但是，前一个和下一个箭头分别不出现在第一个和最后一个图像上，因为它们不起作用（我将“循环”设置为“假”）。只有两个箭头中的一个显示在这些图像上使导航看起来不平衡，所以我希望两个箭头始终显示，但希望非功能箭头比非悬停状态下的功能箭头更透明，比如说0.3 ，以便用户理解它不可操作。

我通过更改此代码来修改js：

if (current.loop || current.index > 0) {
$(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev);}

到此：

if (current.loop || current.index >= 0) {
$(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev);}

并为“下一个”箭头做了同样的事。

这确实会导致两个箭头出现，但我无法弄清楚如何使第一个和最后一个图像上的非功能按钮看起来比功能性按钮更暗。这是一个示例页面（我还原到原始的js，所以用户不会感到困惑）： http://transweb.sjsu.edu/mntrc/events/2012/gallery1.html

任何帮助实现这一点将不胜感激。我是受损的（但不是css受损），所以请提供完整的代码示例，说明如何将其集成到我当前的代码中。感谢。

Answer 1

您可能知道，要显示导航箭头永久可见，请设置此css规则

.fancybox-nav span {
  visibility: visible;
}

如果有前一个或下一个元素，这将显示上一个/下一个导航箭头（如果loop设置为{{，则前一个箭头不会与图库的第一个元素一起显示1}}例如）

为了始终显示“非功能性”箭头（并且变暗），您可以使用false动态添加它们您自定义的fancybox脚本中的回调如：

beforeShow

Fancybox：在所有图库图像上显示两个导航箭头，分别在第一张和最后一张图像上显示“上一张”和“下一张”（但可见）

1 个答案: