花式框：在所有图库图像上显示两个导航箭头，在第一个和最后一个图像上分别显示"previous"和"next"变暗(但可见)

Question

在我的Fancybox库中，我修改了Fancybox CSS，使其始终显示导航箭头（不仅仅是悬停时），并将悬停时的不透明度从0.7增加到1.0。但是，上一个和下一个箭头不会分别出现在第一个和最后一个图像上，因为它们是不起作用的（我将"loop"设置为"false"）。在这些图像上只显示两个箭头中的一个会使导航看起来不平衡，所以我希望两个箭头始终显示，但希望非功能箭头比处于非悬停状态的功能箭头更透明，比如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障碍（但没有css障碍），所以请给出完整的代码示例，说明如何将其集成到我当前的代码中。谢谢

Answer 1

正如您可能知道的，为了显示永久可见的导航箭头，您设置了这个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});
 }
}