Image Reorderer API
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:
Name | Description | Default | Examples |
|---|---|---|---|
| Identifies a DOM element that contains a title for the image | " |
selectors: {
imageTitle: ".caption"
}
|
General options
Image Reorderer Options
Name | Description | Values | Default |
|---|---|---|---|
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 | an URL | none |
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>