This page has not yet been updated to reflect the latest API changes.

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.


var myImageReorderer = fluid.reorderImages (container[, options]);



The container parameter is a CSS-based selector, single-element jQuery object, or DOM element specifying the root node of the Reorderer.


The options parameter is an optional collection of name-value pairs that configure the Image Reorderer, as described in the Options section below.

This component is in Production status

Join the infusion-users mailing list and ask your questions there.

Supported Events



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:






Identifies a DOM element that contains a title for the image


selectors: {
    imageTitle: ".caption"

General options

Image Reorderer Options





Deprecated as of 1.1.2:

If an URL is provided with this option, the current state of the component model will be sent to that URL after a move is carried out using a default afterMove event handler. See Deprecated - afterMoveCallback for info.

an URL


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 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.


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

<script type="text/javascript" src="MyInfusion.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>