Nixbox archive:

Historical documentation for unsupported software. All required demo assets are stored locally in this archive.

jQuery Flyout
an animated image viewing plugin

About jQuery Image Flyout Plugin

jQuery Flyout is a simple image viewing plugin with preloading capabilities I developed in 2008 for my own projects. The goal was to provide a simple, yet effective way to view normal image links without leaving the source page by using jQuery to preload the image, show a message or loading animation during that process, and finally explode or 'flyout' the image into full view using jQuery easing animations. Flyout is not your typical Lightbox plugin for jQuery. If you are looking for an image viewer with more features or a different viewing technique, check out the list of alternatives to the right.

Having said that, I do intend to continue adding new capabilities as I have the time. I really appreciate your reports and suggestions; several of the newer features have come from users like you, so please keep writing.

jQuery Flyout Features

Preloading
jQuery Flyout uses dynamic image preloading Javascript to load the image in the background without leaving the page. Just apply the Flyout plugin to whatever container of linked images on your page and jQuery flyout will do the rest. You can also specify loading text or a loading animation while the image is loading.
Easing Animations
All the native jQuery and Easing Library easing animations are supported, you can even apply a different animation and speed for both the flyout and flyback animations.
Calculated, Custom and Fullsize Viewing
jQuery Flyout automatically sizes your image to maximum size of the image or constrains the image to the size of the viewport, unless you use options like heightMargin and widthMargin, which adds extra margin limitations from the viewport, or use fullSizeImage which expands the image to fullsize despite the size of the viewport.
Fade in and out support
Using the new outOpacity and inOpacity, you can create subtle fading effects to display your images
Other features
  • use the loaderOpacity option to set the opacity of the preloader element.
  • use the startOffset, startHeight and startWidth settings to customize the starting location of the Flyout image to a different location on the page. This can be useful if your trigger link does not contain a thumbnail image and other effects.
  • proper positioning for large loader borders.
  • supports jQuery noConflict mode.
  • accurately calculates destination size including borders.

The latest version 1.3 of jQuery Flyout has been tested successfully with jQuery versions 3.3.1, 2.2.4 and 1.12.4 and should work with jQuery version 1.7 or greater.

jQuery Flyout Options

The following options can also be found in the README.md of the Github 1.3 release archive

outSpeed (integer) - default: 1000

Speed of the flyout animation in milliseconds.

inSpeed (integer) - default: 400

Speed of the flyback animation in milliseconds.

outEase (string) - default: swing

Easing method for the flyout animation.

inEase (string) - default: swing

Easing method for the flyback animation.

loadingSrc (string) - default: '' (empty string)

Path to the image file to use while target image is being preloaded.

loadingText (string) - default: 'Loading...'

The text to display when preloading an image when loadingSrc is not present.

loader (string) - default: 'loader'

The ID assigned to the created flyout div element that contains the target content.

loaderZIndex (integer) - default: 500

The CSS z-index for the created flyout div element (see loader option above.)

loaderOpacity (float) - default: 0.5     version 1.2

The starting CSS opacity to use for the created flyout div element (see loader option above.)

closeTip (string) - default: ' - Click here to close'

The hint text to append to the final target image alt and title tags.

widthMargin (integer) - default: 40

The left and right margin space to restrict the final flyout target image within the current viewport. This value is effectively divided between the left and right margin, i.e. 20px on the left and 20px on the right. Overridden by destElement option.

heightMargin (integer) - default: 40

The top and bottom margin space to restrict the final flyout target image within the current viewport. This value is effectively divided between the left and right margin, i.e. 20px on the top and 20px on the bottom. Overridden by destElement option.

destElement (string) - default: '' (empty string)

The destination element to fly the target image to on the same page; uses full CSS notation, e.g. div#container. Using this overrides heightMargin, widthMargin and fullSizeImage options.

destPadding (integer) - default: 10

The destination element to fly the target image to on the same page; uses full CSS notation, e.g. div#container. Using this overrides heightMargin, widthMargin and fullSizeImage options.

startOffsetX (integer) - default: 0

Horizontal offset in px to start the flyout animation at.

startOffsetY (integer) - default: 0

Vertical offset in px to start the flyout animation at.

startHeight (integer) - default: 0

Overrides starting height of flyout animation in px; uses thumb image height by default.

startWidth (integer) - default: 0

Overrides starting width of flyout animation in px; uses thumb image height by default.

flyOutStart (string) - default: '' (none)

Callback function to run at start of flyout animation.

flyOutFinish (string) - default: '' (none)

Callback function to run at end of flyout animation.

putAwayStart (string) - default: '' (none)

Callback function to run at start of flyback animation.

putAwayFinish (string) - default: '' (none)

Callback function to run at end of flyback animation.

inOpacity (float) - default: 1.0     version 1.2

CSS opacity for the target flyout image and loader at start of the animation.

outOpacity (float) - default: 1.0     version 1.2

CSS opacity for the target flyout image and loader at end of the animation.

useNative (boolean) - default: false     version 1.3

When true, Flyout uses window.innerHeight and innerWidth to determine viewport size. This is overridden to true if document.doctype is null.

displayType (string) - default: false     version 1.3

Determines default sizing of shown image. A displayType of default respects margin settings, full uses the target image dimensions, fit expands image to max width or height of viewport depending on image, fill expands image to max width or height of image to fill the viewport entirely.

jQuery Flyout Tips

  • jQuery Flyout only works with image links: Preferably links containing thumbnail image tags. This is a simple plugin right now, and works best on a set of linked thumbnail images. You can somewhat override this behavior using the startOffset, startHeight and startWidth options on just links.
  • You can use CSS to style the loader: Using CSS and CSS3 styling you can adjust the appearance of the loader container; see example 3.
  • Loader element positioning: Flyout compensates for the Loader element border and padding as well as the sub image tag border and padding to try and wrap the loader tightly around the thumbnail image. If you want some padding, adjust padding of the loader element; image padding, margins and borders are ignored.
  • Offset location can be tricky: If you are using padding or border on the parent body element, or are inside a container with globally redefined margin, padding or border set (like a div when divs are globally defined to have margins), the Flyout offset will be off respectively. Unfortunately there is no easy way for Flyout to figure this out for all browsers, so if you are powerless to fix the CSS of your page, you can use the startOffsetX and startOffsetY to compensate.

Where do I get it? Download jQuery Flyout plugin here

Preserved as a static historical reference.