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

Advanced Gallery
with jQuery
FancyBox
ways to modify this. If you’re not happy with the 30-pixel by 30-pixel size, you
can simply edit the fancybox.png file: Delete the 30×30 image in the top-right of
that file and replace it with a design of your own.
In the FancyBox stylesheet (the jquery.fancybox-1.3.4.css file included in the tutorial
files), you can edit the #fancybox-close style for even greater control. In
this style, you can control the placement of the Close button (change the top and
right settings), the height and width of the button (change the height and width
properties), and even point to a different graphic file by editing the background
property.
IE6 Note: FancyBox uses special CSS styles to overcome bugs in Internet Explorer 6. The styles don’t
reference the fancybox.png file, but instead use different images for each of the controls. IE6 is a nearly
dead web browser, so you’re most likely safe to ignore it, but if you’re still worried and want to change the
appearance of the control graphics, then you need to edit the following image files: fancy_close.png (the
close button), fancy_nav_left.png (the previous button), fancy_nav_right.png (the next button), fancy_
loading.png (the animated loading image), fancy_title_main.png (for the center part of the caption
graphic), fancy_title_right.png (for the right edge of the caption graphic), and fancy_title_left.png (for the
left edge of the caption graphic). Or you can save yourself all this trouble and ignore IE6 altogether.
• The Previous and Next buttons. As with the Close button, the Previous and
Next buttons are images within the fancybox.png file (see Figure 7-7). You can
edit that file (make sure to stay within the 30×30 pixel boundary). You can also
use different graphic files and at different sizes by editing the styles for these two
controls: a group selector (#fancybox-left-ico, #fancybox-right-ico), which provides
properties (like width and height) that are common to both controls, and
the individual styles (#fancybox-left-ico for the Previous button and #fancyboxright-ico
for the Next button), which set the image for the controls.
• The “loading” graphic. When a visitor clicks on a thumbnail to make a larger
image pop onto the page, the browser has to download that file. While it waits,
an animated image appears on the screen to indicate that image is being retrieved.
This image is actually a series of “frames” in the fancybox.png file (see
Figure 7-7). Its 12 frames are 40 pixels tall by 40 pixels wide. To change this
image, you need to edit the fancybox.png file and create your own 12-frame
animation. The CSS style controlling which image is loaded and its width is the
#fancybox-loading div style. But if you want to control the placement, width,
and height of the image, you need to also edit the #fancybox-loading style. It’s a
lot of work, and since the normal “loading” graphic looks great, you may want
to avoid changing it.
• Drop shadows. The drop shadows that appear around the pop-up image are
generated by a bunch of individual image files, including a couple of parts of the
fancybox.png file. Editing these is complex and is best avoided. If you do make
separate graphic files for the various controls discussed in this list and edit the
CSS to point to those files, don’t delete the fancybox.png file—it supplies the
corners for the drop shadows.
230 javascript & jquery: the missing manual
www.it-ebooks.info