About
Why? Because I was bored by so many pages using lightbox and it`s clones,
I wanted something fresh and Mac-like. I couldn`t find any cool alternative that would be build on top of jQuery, so the FancyBox was born. Features:
- Automatically scales large images to fit in window
- Adds a nice drop shadow under the zoomed item
- Groups related items and adds navigation through them (uses preloading)
- Can display images, inline and iframed content
- Customizable through settings and CSS
Examples
Fancy single images
Grouped images (no zooming animation, adds overlay)
More usage examples
| Custom defined image set | Inline content | Iframed content |
|---|---|---|
|
 |
 |
Changelog
| 29/04/08 - | Fixed bug for Opera and Safari when images did not load on second click |
| 24/04/08 - | First release |
How to use
1. Setup
Include nessesary JS files (FancyBox uses pngFix to fix IE png transparency).
/* required */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
/* optional */
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
Include FancyBox CSS file. Dont forget to change image paths.
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">
2. Add your images
Add images and wrap them with a link to the zoomed version
<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Optional: Use the title attribute if you want to show a caption
Optional: Use the rel attribute to group images
3. Use the plugin
Sample examples:
$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({
'hideOnContentClick': true
});
$("p#test3 a").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});
Available options
| hideOnContentClick | Hides FancyBox when cliked on zoomed item (false by default) |
| zoomSpeedIn | Speed in miliseconds of the zooming-in animation (no animation if 0) |
| zoomSpeedOut | Speed in miliseconds of the zooming-out animation (no animation if 0) |
| frameWidth | Default width for iframed and inline content |
| frameHeight | Default height for iframed and inline content |
| overlayShow | If true, shows the overlay (false by default) |
| overlayOpacity | Opacity of overlay (from 0 to 1) |
| itemLoadCallback | Custom function to get group items (see example on this page source) |