Print this page

Stock fancybox, not gonna cut it

Stock fancybox, not gonna cut it

Fancybox is a modal dialog plugin for jQuery I like to use myself. But a stock fancybox is just not going to cut it for us customizers ofcourse, so how to tweak it so we have something to be proud of?
What do you say of some rounded border goodness added to it? Yup, I like it! Continue reading to see how to set things up

Out of the box there's no support for rounded borders of the content overlay but as a wise man once said "everything's possible" and so it is.
First thing to note, there's a small downside to using the following approach. It will render the background of the content overlay as the transparent gray (which is used by Fancybox. In normal circumstances this should be white). This can be noticed when loading the content but usually isn't.

As you can see by clicking on this article's image the fancybox renders with rounded borders (as compared to the sqaure fancyboxes on fancybox's homepage). This works crossbrowser and even has support all the way back to IE6. So How to get this done?
First of we use a little CSS3 (and CSS3Pie for IE support) for the border radius, fairly simple really, just apply the usual border-radius syntax (see CSS3Pie site for reference) to #fancybox-content as in the example below.
Now when you reload your tweaked page you will notice that it's not quite perfect yet, the borders are rounded but there's an opaque white behind it, you're seeing the background of #fancybox-outer. We can fix this by setting that background to a pixel with the same transparent gray as the rest of fancybox.
Now when we reload we have the perfect round border with this fancy plugin.

#fancybox-outer
{
  position:relative;
  width:100%;
  height:100%;
  background-image:url("/img/fancybox/fancy_border_radius.png")
}

#fancybox-content
{
  width:0;
  height:0;
  padding:0;
  outline:none;
  position:relative;
  overflow:hidden;
  z-index:1102;
  border:0px solid #fff;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  behavior:url("/styles/pie.php")
}

Note that I have disabled Fancybox on this page for IE8 and below. This is due to conflicts that arise between fancybox and the Syntaxhighlighter being used on posts as these. Fancybox for IE8 and below is only enabled on the homepage (for now).

Page 1 of 1

Post a comment

Captcha Image