Let's start with opening the Fancybox pop up using the API. We used this briefly in the recipe on changing slideshow settings. The method is $.fancybox.open and can be passed a range of different parameters. The first parameter is the content to open inside of Fancybox and the second parameter is the options we want to use for this Fancybox pop up. If we want to open Fancybox using the API method and have it do the exact same thing as in the Fancybox with a single image recipe, we'll call Fancybox and pass it the href tag of the image as shown in the following code:

$('#show-fancybox').click(function() {
  $.fancybox.open('images/waterfall.png');
});

The previous code uses a jQuery click event binding, which is passed an anonymous function, to tell Fancybox to open and use the string we provided to open. The string can be a range of different types of content that Fancybox can open. If you wanted it to open an image gallery, images can be passed in as an array, as shown in the code:

$('#show-fancybox').click(function() {
  $.fancybox.open([
    {href:'images/waterfall.png'},
    {href:'images/frozen-lake.png'}
  ]);
});

The objects can contain the href and title tags for the image, as shown in the following code:

{href:'images/frozen-lake.png', title: "Frozen Lake"}

For the remainder of this recipe, we will have Fancybox load some HTML. Add this HTML to the index.html file inside the body:

<div id="fancybox-content" class="hidden">
  <h2>Super Simple Fancybox Popup</h2>
  <p>With some basic text for content.</p>
  <a href="#" class="close">Close Fancybox</a>
</div>

We also need to slightly change the link to open Fancybox in the index.html file:

<a id="show-fancybox" href="#">Show The HTML</a>

Lastly, we need to change our open function for Fancybox inside the scripts.js file:

$('#show-fancybox').click(function() {
  $.fancybox.open($('#fancybox-content'));
});

Now our Fancybox open method contains a jQuery object for the content to display. When you open Fancybox it should look like the following screenshot:

Now that we have Fancybox opening our HTML, let's look at using the $.fancybox.close function. This function closes the Fancybox pop up. Let's make the Close Fancybox link we have inside the Fancybox pop up, close the pop up.

$('.close').on('click', function() {
  $.fancybox.close();
});

Fancybox has other functions that are advantageous when you have dynamically changing content inside the Fancybox pop up. If you want to tell Fancybox to reposition the location of the pop up, it can be done with a call to the $.fancybox.reposition() function. Fancybox will move the pop up to the appropriate location inside the window.

Fancybox also provides us with a function to resize the Fancybox window as required. The $.fancybox.update() function tells Fancybox to resize the height of the Fancybox pop up to match the content. It is necessary when you are programmatically changing the content inside the Fancybox pop up.

The $.fancybox.toggle() function will put Fancybox into fullscreen mode, if necessary. It will only have an effect if the content is larger than the current Fancybox pop-up window.

You can show and hide the Fancybox loader using the $.fancybox.showLoading() and $.fancybox.hideLoading() functions. These functions are useful when you are processing data inside the Fancybox pop up and want to tell the user that your content or information is loading.

The last major function available to us is the $.fancybox.cancel() function. This function will stop loading the Fancybox pop up. It may be useful when the content takes too long to load and you want to just stop (especially if the content is an iframe and the website you are trying to load is not available).