O'Reilly logo

Instant Fancybox by Kyle Diedrick

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Modifying styles and layout (Intermediate)

Now that we have a basic handle on how Fancybox works and some of the things it can do, let's start looking at modifying the way the Fancybox pop up looks. Fancybox provides a number of useful settings we can use to change the way that the Fancybox pop up looks. We're going to start with the basic margin and height settings and work our way to the auto-sizing settings.

Getting ready

To get things started, we just need a simple Fancybox pop up. In the example code, I have copied the code from the Fancybox with a single image recipe, where we used Fancybox to load a single image.

How to do it...

  1. The Fancybox margins indicate the minimum distance between the Fancybox pop up and the edge of the window. To change ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required