Page Comparison

...

<form action="#">
    <a href="myImage1.jpg">
        <img src="myImage1.jpg" alt="image 1 thumbnail" />
        <span>Image 1</span>
        <input name="image 1" value="0" type="hidden" /> 
    </a>
    <a href="myImage2.jpg">
        <img src="myImage2.jpg" alt="image 2 thumbnail" />
        <span>Image 2</span>
        <input name="image 2" value="1" type="hidden" /> 
    </a>
    <a href="myImage3.jpg">
        <img src="myImage3.jpg" alt="image 3 thumbnail" />
        <span>Image 3</span>
        <input name="image 3" value="2" type="hidden" /> 
    </a>
    ...
</form>

The Image Reordeer Reorderer needs to know about the 'container' of your image collection. In this case, that could would be the <form> element. But since there may be other <form> elements in the markup, you will need to uniquely identify the <form> you want to use as a container.

The Reorderer accepts a jQuery selector, so you can choose any method that will uniquely identify the <form> element. We'll attach a unique ID to it:

<form action="#" id="reorder-images-form">
    ...

You also need to tell the Reorderer which of your images should be reorderable. Most of the time, that will likely be all of them, but perhaps you want the first image to always be first, since it's the cover of the album. For this tutorial, though, we'll make all of the image contained images movable.

You'll tell the Reorderer which items are to be orderable with another jQuery selector. The Image Reorderer understands a default class name for this purpose. You can override that if you like, but for this tutorial, we'll go the simple route. The default classname is flc-imageReorderer-item, so let's add that to each of the <a> elements:

...