Fancybox: display both nav arrows on all gallery images, with "previous" and "next" dimmed (but visible) on first and last images, respectively

Question

In my Fancybox gallery, I modified the Fancybox CSS to display the navigation arrows at all times (not just on hover), and set the opacity to increase from 0.7 to 1.0 on hover. However, the previous and next arrows do not appear on the first and last image, respectively, because they are non-functional (I have "loop" set to "false"). Having only one of the two arrows showing on those images makes the nav look unbalanced, so I want both arrows to show at all times, but want the nonfunctional arrows be even more transparent than the functional arrow in its non-hover state, say 0.3, so that the user understands it's non-operational.

I altered the js by changing this code:

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

to this:

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

and did the same for the "next" arrow.

This does cause both arrows to appear, but I can't figure out how to have the non-functional buttons on the first and last image appear dimmer than the functional one. Here's an example page (I reverted to the original js so users wouldn't be confused): http://transweb.sjsu.edu/mntrc/events/2012/gallery1.html

Any help achieving this would be appreciated. I am js-impaired (but not css-impaired), so please give complete code examples, indicating how to integrate it in my current code. Thanks.

Answer 1

As you most probably know, to show navigation arrows permanently visible you set this css rule

.fancybox-nav span {
  visibility: visible;
}

this will, or course, show the prev/next navigation arrows ONLY if there is a previous or next element (previous arrow won't show with the first element of the gallery if loop is set to false for instance)

In order to show the "non-functional" arrows all the time (and dimmed), you can append them on the fly using the beforeShow callback within your custom fancybox script like :

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