Image Reorderer Overview The Image Reorderer is a convenience function for applying the Reorderer to images within a collection.. This page provides technical details of the API. For a simple working example, see Integrating the Reorderer. Creation var myImageReorderer = fluid.reorderImages (container[, options]); Parameters container The container parameter is a CSS-based selector, single-element jQuery object, or DOM element specifying the root node of the Reorderer. options The options parameter is an optional collection of name-value pairs that configure the Image Reorderer, as described in the fluid:Options section below. This component is in Production status Talking to the Server Using The afterMove Event List Reorderer API Grid Reorderer API Layout Reorderer API Advanced Reorderer API Integrating the Reorderer Reorderer API Fluid Component API Join the infusion-users mailing list and ask your questions there.

Supported Events

Options

Selectors

The selectors option is an object containing CSS-based selectors for various parts of the Image Reorderer. Supported selectors are:

Image Reorderer-specific Selector
The Image Reorderer supports one additional selector:

selectors: {
    imageTitle: ".caption"
}

General options

Image Reorderer Options

Styling the Image Reorderer

The Image Reorderer includes default CSS styles that it applies to the thumbnails. The application of styles is based on known class names. The default class names are described below, and can be used by including the Image Reorderer stylesheet:

<link href="components/reorderer/css/imageReorderer.css" type="text/css" rel="stylesheet" media="all"/>

NOTE that the default class names can be overridden with your own classes using the styles option: see the fluid:Options section above.

Default classes:

   fl-reorderer-movable-default - This class is applied to thumbnail elements in their default state.
   fl-reorderer-movable-selected - This class is applied to the thumbnail that has been selected. The selected thumbnail item can be moved using keystrokes.
   fl-reorderer-movable-hover - This class is applied to thumbnails when the mouse hovers over them.
   fl-reorderer-movable-dragging - This class is applied to the thumbnail that is currently being moved.
   fl-reorderer-avatar - This class is applied to the avatar, the image of the thumbnail as it is being dragged about by the mouse.
   fl-reorderer-dropMarker - This class is applied to the drop target indicator when the mouse is used to drag a thumbnail.

Dependencies

The Image Reorderer dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file:

<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="framework/core/js/jquery/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="framework/core/js//Fluid.js"></script>
<script type="text/javascript" src="framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="components/reorderer/js/GeometricManager.js"></script>
<script type="text/javascript" src="components/reorderer/js/Reorderer.js"></script>
<script type="text/javascript" src="components/reorderer/js/ImageReorderer.js"></script>