testing new beta!
finally! you can preview at test page
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 |
|---|---|---|
 |
 |
 |
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) |
Comments
‹ First < 52 53 54 55 56 > Last ›
‹ First < 52 53 54 55 56 > Last ›
Post your comment
Just a basic question (i think)... how to disable the scrollbar when you use the script for an iframe?
Thanks for your help!
I can ont understand
worried
Any help would be great!
In that case I will wait for a new version.
Thanks,
Great work by the way
There's a little problem with the captions, your extension test with imgTypes is case sensitive, so if i have an image that has the extension .JPG, the title attribute is not shown.
Anyway, it's just a detail, your source is good et works just fine, thanks for sharing !
SnakeFast