example index

JQuery Flyout



jQuery Flyout
Setup and Styling Examples

Getting Started with jQuery Flyout

Download the Libraries

Download jQuery version 3.3.1, 2.2.4, 1.12.4 or use the GoogleAPI links

Download the jQuery Easing library version 1.4.1

Download latest jQuery Flyout release

Example 1: fullSizeImage with full Opacity animation

Here's some default CSS, jQuery Javascript and starter HTML:

and the jQuery Javascript to activate the code

and finally the div that wraps the image linked thumbnails; you will need to insert your own links and thumbnail images.

Gallery #1

Gallery #1 Example Explained:

Example 2: Easing, Loading Animation Example and Partial Opacity

For this example we have some additional CSS to add to the last example:

as well as different setup Javascript:

Gallery #2

Gallery #2 Example Explained:

Example 3: External event Fly Back & Custom Margins

Slightly different CSS:

And some new Javascript

Gallery #3

Fly Back

Flyback link code:

Gallery #3 Example Explained:

Example 4: Flyout Gallery Viewer

This is an advanced mashup example, demonstrating the destElement and callback options and features:

Click here to see the jQuery Flyout Photo Album Examples

Special Thanks:

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

jQuery Flyout Tips

Where do I get it? Download jQuery Flyout plugin here