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.
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.
To start out we'll look at the
wrapCSSsetting. Fancybox adds whatever classes you pass to this setting to the top-most div of the Fancybox pop up. For this example, we want Fancybox to add thecustom-stuffclass to the wrapping div.$('.fancybox').fancybox({ wrapCSS: "custom-stuff" });Now if we open a browser and inspect the Fancybox wrapping div, we should see our class added to the div.
<div class="fancybox-wrap fancybox-desktop fancybox-type-image
custom-stufffancybox-opened" tabindex="-1" style="width: 622px; height: auto; position: absolute; top: 225px; left: 20px; opacity: 1; overflow: visible;">In the previous div, we have all of the Fancybox classes and attributes on the Fancybox wrapping div, as well as the
custom-stuffclass we added. Fancybox creates the div with several classes and styles included. The classes are used to provide the default style for Fancybox and are inside thejquery.fancybox.cssfile. The styles that are added are determined from the settings that are passed to Fancybox. If no settings are provided, then the height and width are set based on the content, and the top and left values are set to position Fancybox at the middle of the screen. We covered adjusting the positioning and sizing of Fancybox in the Modifying styles and layout recipe.Now that we have our
custom-stuffclass added, we can use it to customize the styles in the Fancybox pop up div. In thestyles.cssfile, you can add whatever styles you would like to add to the pop up. For this example, we want all of the images to have a box shadow and a small green border..custom-stuff img { border: 3px solid green; -webkit-box-shadow: 0px 9px 16px -6px #000; box-shadow: 0px 9px 16px -6px #000; }Note
Vendor prefixes (such as
–webkit-) have become a common way for browsers to introduce new features before the official specification is released. In this case, we are only using the–webkit-prefix because Firefox has supported the official specification since Version 4.0, while the iOS Safari browser just received official support as iOS 6.Now we should see our styles applied to the images. In this case, we'll see a green border and a shadow underneath the image, as shown in the following screenshot:
The wrapCSS property adds the class you provide it to the Fancybox wrapping div. We can then use this class to select elements inside Fancybox and apply styles to them. The advantage of using the wrapCSS setting to add a class is that if we wanted to target the Fancybox wrapping div directly, we can override the default settings, which are set via several of the classes that Fancybox uses such as fancybox-opened, fancybox-wrap, and fancybox-desktop. We can do this using CSS to select our class and the class we want to override: .fancybox-opened.custom-stuff.