Let's create the HTML and CSS for the custom buttons we are going to have. We'll start with the following HTML code:

<div class="custom-controls">
  <a href="#" class="previous">Previous</a>
  <a href="#" class="play-pause">Play</a>
  <a href="#" class="next">Next</a>
  <a href="#" class="random">Random</a>
</div>

The HTML we have is a div element containing the four links we will use to trigger the API functions.

Next let's add some styles to the styles.css file to make the custom-controls div show all the time:

h1 {
  margin-top: 50px;
}

.custom-controls {
  background: white;
  height: 50px;
  line-height: 50px;
  width: 93%;
  position: fixed;
  top: 0px;
  z-index: 9999;
  text-align: center;
  
}

.custom-controls a {
  padding: 0 15px;
}

Note that the links will be visible even when Fancybox is not open. These controls will still work even without Fancybox being displayed. For the sake of brevity, we have not made the controls hide and show with the Fancybox pop up, but I would recommend that you do. With these styles in the styles.css file, the custom-controls div should look like the following screenshot:

Now that we have the HTML and CSS files in place, we can start making our links work. Let's start with the Previous link, which will move the slideshow back by one image. First we need to bind to the click event. Inside that event binding, we just need to call $.fancybox.prev() to move Fancybox to the previous image, as shown in the following code:

$('.previous').click(function() {
  $.fancybox.prev();
});

Next let's make the Next link work. This will be exactly the same as the Previous link, except we will call $.fancybox.next(), as shown in the following code:

$('.next').click(function() {
  $.fancybox.next();
});

The play and pause functionality is also just as simple, but we're going to make the text change on the link as well. First let's set up the functionality, as shown in the following code:

$('.play-pause').click(function() {
  $.fancybox.play();
});

The link will now play and pause the slideshow, depending on whether or not the slideshow is currently playing. Let's make the button text reflect the action we will be taking, instead of just always saying Play. The following code should be used, instead of the previous code:

$('.play-pause').click(function() {
  $.fancybox.play();
  if ($(this).text() === 'Play') {
    $(this).text("Pause");
  } else {
    $(this).text("Play");
  }
});

In the previous code, we are still calling the Fancybox API function. We are also checking the text of the play-pause link. If the text is Play then we set the text to Pause. If it is anything other than Play, we set it to Play. Now our link represents the state of the Fancybox slideshow.

The last link is our random link. This link will use the Fancybox API $.fancybox.jumpto method, which moves the slideshow to the image at the provided index. We will be providing a random number between zero and four as the index. First we need to create our random number. JavaScript has a built-in way to get random numbers using the Math.random() function. We will use this to get our random number. We will then provide this random number to the $.fancybox.jumpto() function, as shown in the following code:

$('.random').click(function() {
  var randomNumber = Math.floor(Math.random() * 4);

  $.fancybox.jumpto(randomNumber);
});

In the previous code, the randomNumber variable is a random integer in the range of zero to three (including three). We provide that to the $.fancybox.jumpto() function and when the Random link is clicked on, a random image will display. Note that with this implementation, the image that is being transitioned to may be the same as the one that is currently being displayed.