0

在我的 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

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

4

1 回答 1

2

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

.fancybox-nav span {
  visibility: visible;
}

loop这将，或者当然，仅在存在上一个或下一个元素时显示上一个/下一个导航箭头（例如，如果设置为，上一个箭头不会与画廊的第一个元素一起显示false）

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

beforeShow: function(){
 // evaluates if this is the FIRST element of the gallery
 // if so, appends a dimmed (non-functional) PREVIOUS navigation arrow
 if(this.index == 0) {
   $(this.tpl.prev).appendTo($.fancybox.outer).css({"opacity":0.6});
 } else 
 // evaluates if this is the LAST element of the gallery
 // if so, appends a dimmed (non-functional) NEXT navigation arrow
 if( this.index < this.group.length){
   $(this.tpl.next).appendTo($.fancybox.outer).css({"opacity":0.6});
 }
}
于 2012-08-24T06:24:26.367 回答