The Fancybox margins indicate the minimum distance between the Fancybox pop up and the edge of the window. To change the margins of the Fancybox pop up, we provide it a number. This sets all of the margins to be the same, as shown in the following code:

$('#show-fancybox').fancybox({
  margin: 50
});

You can also set the margins individually by using an array. The order of the values in the array is as follows: [top, right, bottom, left]. For example, say we wanted to have the margin on the left higher than the margin on the right, as shown in the following code:

$('#show-fancybox').fancybox({
  margin: [50, 50, 50, 200]
});

Now the Fancybox pop up will be, at minimum, 200 pixels from the left edge of the window. The default margin is 20 pixels.

Padding is the space inside the Fancybox pop up between the edge of the pop up and the content. Padding can be set exactly the same way as margins: either as a number that determines the padding on all sides, or as an array that sets the padding on each side individually. If we did not want any padding, we would set it as shown in the following code:

$('#show-fancybox').fancybox({
  padding: 0
});

The default padding value is 20 pixels.

Fancybox can be told whether or not we want it to automatically size to the content we provide. If we set the autoSize setting to false, the Fancybox pop up will become the default height and width. Note that the autoSize setting does not apply to images; it only applies to every other type of content that Fancybox will display. The default setting for autoSize is true.

We can also provide the height and width for the Fancybox pop up. However, these two properties only work with the iframe and SWF content, unless we set the autoSize setting to false. Let's set the autoSize setting to false, the height to 300, and the width to 200 and load the Fancybox website in the Fancybox pop up, as shown in the following code:

$('#show-fancybox').fancybox({
  padding: 0,
  autoSize: false,
  height: 300,
  width: 250
});

Here we have set the padding to 0, the autoSize setting to false, the height to 300, and the width to 200. This results in a very small window that has loaded the Fancybox website, as seen in the following screenshot:

The default height setting is 600 pixels and the default width setting is 800 pixels.

Fancybox also provides the minWidth, minHeight, maxWidth, and maxHeight settings. These settings do exactly what one would expect them to do: set the minimum or maximum height and width of the Fancybox pop up. Note that setting maximums and minimums does apply to images, so if you need to specify the height or width of the pop up that displays images, the following settings are the ones to use:

$('#show-fancybox').fancybox({
  padding: 0,
  maxHeight: 400,
  maxWidth: 300,
  minHeight: 250,
  minWidth: 250
});

In the previous code, we set a maximum height of 400 pixels, a maximum width of 300 pixels, a minimum width of 300 pixels, and a minimum width of 250 pixels. This allows the images we load to still scale if they need to, but only within the limits we have provided.

The default minimum height and width is 100 pixels and the default maximum height and width is 9999 pixels.

Fancybox automatically resizes and repositions the Fancybox window when it is resized. Because we are showing images, we want it to stay the size it is no matter how the window resizes. We can use the autoResize and autoCenter settings to prevent or allow resizing when the window resizes, as shown in the following code:

$('#show-fancybox').fancybox({
autoResize: false,
autoCenter: false
});

Now that we have set autoResize and autoCenter to false, the Fancybox pop up will not reposition or resize when the window is resized.

The default value for both of these settings is !isTouch. Fancybox has a variable defined inside of it, which identifies touch devices, and prevents resizing and auto-centering on touch devices.

The last setting to discuss is the fitToView setting. The fitToView setting will make the Fancybox pop up resize to fit inside the window when it is opened. Going along with the settings we have set in step 5, we probably don't want the window to resize when it is opened for the first time. We set fitToView to false, as shown in the following code:

$('#show-fancybox').fancybox({
  autoResize: false,
  autoCenter: false,
  fitToView: false
});

Now when Fancybox is first opened, the window is the size we have set it to be, instead of attempting to resize it to fit the browser. The default value of the fitToView setting is true.