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

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

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

Answer 1

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

.fancybox-nav span {
  visibility: visible;
}

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

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

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});
 }
}