Child pages
  • Tutorial - Image Reorderer

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can identify the captions using a custom classname, or use the default selector classname , flc-reorderer-imageTitle:

Code Block
html
html
<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
html
html
<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/FluidDocument.js"></script>
<script type="text/javascript" src="../../../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion-1.2/./../../../framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion-1.2/./../../../framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="infusion-1.2/./../../../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/FluidIoC.js"></script>
<script type="text/javascript" src="../../../../components/reorderer/js/ReordererDOMUtilities.js"></script>
<script type="text/javascript" src="../../../../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>

...