README.md

Fancybox transitions

This plugin enables a variety of CSS3 open/close transitions for fancybox 2.

Transitions have been taken from the excellent "Nifty Modal Window Effects" by Tympanus.

Check out the demo!

Usage

Download jQuery

Download fancybox 2

Download and include jquery.fancybox-transitions.js and jquery.fancybox-transitions.css.

Make sure to include everything in the correct order:

<!-- Add jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery.fancybox.pack.js?v=2.1.5"></script>

<!--Add Fancybox transitions -->
<link rel="stylesheet" href="/css/jquery.fancybox-transitions.css?v=0.1" type="text/css" media="screen" />
<script src="/js/jquery.fancybox-transitions.js?v=0.1"></script>

Then, simply pass any of the new transitions into the fancybox initialization as an openMethod and/or closeMethod

	$('.fancybox').fancybox({
		openMethod: 'superscaleIn',
		closeMethod: 'superscaleOut'
	});

Included transitions (with both 'In' and 'Out' variants)

1. Drop in ('drop')
2. Fade in and scale up ('fadescale')
3. Slide in from the right ('slideright')
4. Slide in from the bottom ('slidebottom')
5. Newspaper (twirl in) ('newspaper')
6. Fall ('fall')
7. Fall from the side ('fallside')
8. Slide from the top ('stickyup')
9. Horizontal 3D flip ('horizontalflip')
10. Vertical 3D flip ('verticalflip')
11. 3D swinging sign ('sign')
12. Super scaled! ('superscaled')
13. 3D growing slit ('slit')
14. 3D rotate from bottom ('rotatebottom')
15. 3D rotate from left ('rotateleft')
16. Blur ('blur')