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

Adding custom styles (Intermediate)

Let's take a look at customizing the look of Fancybox even beyond the basic settings that we have covered previously. Now we're going to cover the wrapCSS setting as well as how to adjust the CSS of the default HTML that Fancybox uses.

Getting ready

Let's start by adding a CSS file to our HTML. Create a file called styles.css and put it in the same directory as the index.html file. Include the styles.css file on the page using a link tag:

<link rel="stylesheet" type="text/css" href="styles.css">

Now that we have the styles.css file created and loaded on the page, we can use it for all of the styles we want to add to our page.

How to do it...

  1. To start out we'll look at the wrapCSS setting. Fancybox adds whatever classes ...

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