jQuery.flyout
July 21st, 2008
November 16th, 2008
Demo 1 - Default configuration
$('#default_gallery a').flyout();
- Since the default setting does not specify a loading image (loadingSrc), the opacity of the default layer CSS rule (#loader) is set to a background color of #000 and 'loading' text is added as a default notification that things are afoot.
- Note what happens if you click another thumbnail before closing the open image. Neat!
- Try resizing the screen between clicks - note what happens with new flyout size and placement.
Demo 2 - Easing and Loading Animation Demo
$('#demo_gallery_1 a').flyout({loadingSrc:'images/thumb-loading.gif',
outEase:'easeInCirc',
inEase:'easeOutBounce'});
- Note what happens if you scroll the thumbnail window, before closing the open image. I don't have a fix for this yet and I'm not entirely sure it needs to be fixed; especially without thoroughly confusing the user..: 'where IS that image disappearing to?' Off into the hidden nether-realms of the scrollbox!
- Loading animations are courtesy of AjaxLoad.info.
- The easing plugin and demos can be found here.
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
- note different loader name: In this example, if ID element
#loader2 is assigned CSS rules, the formatting is applied to the created loader element. Thus, a background color of #FFF produces a different highlighting, instead of shade, effect while loading.
- wider margins: limit the full extended size of the flyout image, even if the source image is larger - margins are split between left and right or top and bottom.
- click Put Away, above: this uses the same rule to match elements with a single command to tell flyOut to close any open elements.
Demo 4 - Flyout Gallery Viewer
This is an advanced mashup demo, demonstrating the following techniques:
- a modified version of Ben Sterling's jqAlbumParser plugin to grab public, online picture galleries via RSS feed - both Google Picasa and Yahoo Flickr supported and demonstrated
- custom graphics and cross-browser tested CSS
- jQuery UI animations for gallery pic title display, and long descriptions in Flickr
- new jquery.flyout feature: destination containers
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
