...
You can identify the captions using a custom classname, or use the default selector classname , flc-reorderer-imageTitle:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<form action="#" id="reorder-images-form">
<a href="myImage1.jpg" class="flc-imageReorderer-item">
<img src="myImage1.jpg" alt="image 1 thumbnail" />
<span class="flc-reorderer-imageTitle">Image 1</span>
<input name="image 1" value="0" type="hidden" />
</a>
<a href="myImage2.jpg" class="flc-imageReorderer-item">
<img src="myImage2.jpg" alt="image 2 thumbnail" />
<span class="flc-reorderer-imageTitle">Image 2</span>
<input name="image 2" value="1" type="hidden" />
</a>
<a href="myImage3.jpg" class="flc-imageReorderer-item">
<img src="myImage3.jpg" alt="image 3 thumbnail" />
<span class="flc-reorderer-imageTitle">Image 3</span>
<input name="image 3" value="2" type="hidden" />
</a>
...
</form>
|
...
Step 2: Write the script
YouTo make the HTML you just created do something special, you'll need to create a file to contain your initialization script - the script you write to apply the Reorderer to your image collection.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="infusion-1.2../../../../lib/jquery/core/js/jquery.js"></script> <script type="text/javascript" src="infusion-1.2../../../../lib/jquery/ui/js/jquery.ui.core.js"></script> <script type="text/javascript" src="infusion-1.2../../../../lib/jquery/ui/js/jquery.ui.widget.js"></script> <script type="text/javascript" src="infusion-1.2../../../../lib/jquery/ui/js/jquery.ui.mouse.js"></script> <script type="text/javascript" src="infusion-1.2../../../../lib/jquery/ui/js/jquery.ui.draggable.js"></script> <script type="text/javascript" src="infusion-1.2../../../../framework/core/js/jquery.keyboard-a11yFluidDocument.js"></script> <script type="text/javascript" src="infusion-1.2../../../../framework/core/js/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="../../../../framework/core/js/FluidView.js"></script> <script type="text/javascript" src="../../../../framework/core/js/DataBinding.js"></script> <script type="text/javascript" src="../../../../framework/core/js/FluidFluidIoC.js"></script> <script type="text/javascript" src="infusion-1.2/framework/core../../../../components/reorderer/js/FluidDOMUtilitiesReordererDOMUtilities.js"></script> <script type="text/javascript" src="infusion-1.2../../../../components/reorderer/js/GeometricManager.js"></script> <script type="text/javascript" src="infusion-1.2../../../../components/reorderer/js/Reorderer.js"></script> <script type="text/javascript" src="infusion-1.2../../../../components/reorderer/js/ImageReorderer.js"></script> <script type="text/javascript" src="image-collection.js"></script> |
...