JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

• Border color around pop-up images. Normally, FancyBox displays a white
border around a pop-up image. As mentioned in the previous section, you can
control the size of that border by sending a padding value to the FancyBox function.
However, to control its color, you need to edit the FancyBox style sheet.
Locate the style #fancybox-content and change its border color from #FFF to
whatever color you prefer.
• Color behind photos. When you create a gallery effect where a visitor can click
the previous and next buttons to jump from large image to large image, Fancy-
Box displays a background color as one image fades out and the next fades in.
This color is defined by the background property in the #fancybox-outer style.
It’s a good idea to have this value match whatever color you define for the border
color (previous bullet point).
• Captions. You can control the color, font, and size of captions by editing various
CSS Styles. The #fancybox-title style defines the font and font size of the caption,
while the .fancybox-title-inside, .fancybox-title-outside, and .fancyboxtitle-over
styles affect the look of the caption based on its titlePosition setting
(discussed on page 228). For example, if you set the “titlePosition” option to
inside, the caption appears inside the border for the image. If you change the
border color (see above bullet point), then you should change the background
property on the .fancybox-title-inside style to match that border color. If you
don’t set the titlePosition option, FancyBox uses images inside the fancybox.png
file to generate a graphical caption box. It takes three slices of that image (one for
the left edge of the box, another for the middle section of the box, and a third for
the right edge of the box). To alter the images used, you can edit the following
styles: #fancybox-title-float-left, #fancybox-title-float-main, and #fancybox-titlefloat-right.
Tip: FancyBox lets you customize the HTML used to display the captions in many different ways by creating
a custom function. You can find out how and see more tips and tricks for using FancyBox at
http://fancybox.net/blog.
Tutorial: FancyBox Photo Gallery
Although FancyBox is really easy to use, it’s always helpful to have a step-by-step
tutorial showing you how it’s done. In this tutorial, you’ll take a page with a basic set
of thumbnail images and turn it into a fancy pop-up gallery.
Note: See the note on page 29 for information on how to download the tutorial files.
www.it-ebooks.info
chapter 7: improving your images
Tutorial: FancyBox
Photo Gallery
231