To start with, let's make the bar hidden all the time. We can simply add the hidden class to the custom-controls div, as shown in the following code:

<div class="custom-controls hidden">

Now that the custom controls are hidden on page load, we need to make them display when we open Fancybox. We'll use the afterShow callback to make the custom controls show right after Fancybox has finished animating into view. We need to change our call to Fancybox to include this new callback function:

$('.fancybox').fancybox({
  afterShow: function() {
    $('.custom-controls').removeClass('hidden');
  }
});

Here we are calling Fancybox with a settings object that only has one setting: afterShow. The afterShow setting is an anonymous function, in which we remove the hidden class from the custom controls.

Now our controls show once we open Fancybox, but they continue to show after it is closed. We can use the beforeClose callback to run the code to add the hidden class back to the custom-controls div just as the Fancybox pop up is closing, as shown in the following code:

$('.fancybox').fancybox({
  afterShow: function() {
    $('.custom-controls').removeClass('hidden');
  },
  beforeClose: function() {
    $('.custom-controls').addClass('hidden');
  }
});

The custom-controls div should now hide when Fancybox is closed.

Next let's make the Fancybox pop up close when the slideshow is paused. Fancybox has another callback function onPlayEnd, which is called when slideshow playback is paused. We'll use this along with the $.fancybox.close() API function to make the Fancybox pop up close when the slideshow is paused, as shown in the following code:

$('.fancybox').fancybox({
  afterShow: function() {
    $('.custom-controls').removeClass('hidden');
  },
  beforeClose: function() {
    $('.custom-controls').addClass('hidden');
  },
  onPlayEnd: function() {
    $.fancybox.close();
  }
});

In the previous code, we are telling Fancybox that the onPlayEnd callback should use the anonymous function, which closes the Fancybox pop up. When you play the slideshow nothing should happen, but if you click the link again to pause, the slideshow Fancybox will close.