jQuery.flyout

July 21st, 2008

November 16th, 2008

Demo 1 - Default configuration

$('#default_gallery a').flyout();

Demo 2 - Easing and Loading Animation Demo

$('#demo_gallery_1 a').flyout({loadingSrc:'images/thumb-loading.gif',
				outEase:'easeInCirc',
				inEase:'easeOutBounce'});

Demo 3 - External event Put Away, Custom Margins and Custom Loader

$('#demo_gallery_2 a').flyout({loadingSrc:'images/thumb-loading2.gif',
				outEase:'easeOutQuad',
				inEase:'easeInBack',
				loader:'loader2',
				widthMargin:300,
				heightMargin:300});

Put Away

Demo 4 - Flyout Gallery Viewer

This is an advanced mashup demo, demonstrating the following techniques:

Click here to see the jQuery.flyout Photo Album Demos

Download - jquery.flyout - v1.1

This plugin requires the jQuery library - tested with version 1.2.6 of jQuery only.

Notes

jquery.flyout was originally designed to be a simple yet elegant way to show source images. With that in mind flyout currently works only when assigned to <a> tags with a single <img> element inside, for various reasons, i.e. href and src attributes

If you find any serious bugs, or have another reasonable improvement suggestion, please use the ticket reporting system at plugins.jquery.com. All other comments or work-for-hire requests can be mailed to jolyon at nixbox.com. I'm sorry I don't have time to answer all emails - try it out yourself, experiment with different settings and have fun!

my gratitude to the jQuery production team and all the plugin authors for the tools and inspiration for this plugin.
Cheers!

special thanks to National Geographic Photography, Chris Foss and Chris Moore

copyright (c) 2008, 2009 Jolyon Terwilliger - Nixbox Web Designs