Page Comparison

...

Step 1: Prepare your markup

Let's suppose you have some simple markup displaying your image 're using a <form> with hidden <input> elements to record the ordering of the images in your collections. A simple example of this could be:

<form action="#" id="reorder-images-form">
    <div>">
    <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="DragonfruitmyImage2.jpg">
 
          <img src="DragonfruitmyImage2.jpg" alt="Dragonfruitimage 2 thumbnail" />
        <span">Image 2</span>
         <span">Dragonfruit</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="dragonfruitimage 3" value="02" type="hidden" /> 
    </a>
   </a>
    ...
</form>

The Image Reordeer needs to know about the 'container' of your image collection. In this case, that could be the <form> element. 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 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:

<form action="#" id="reorder-images-form">
    <a href="

myImage1.jpg" class="flc-imageReorderer-item">
        

<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" class="flc-imageReorderer-item">
        

<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" class="flc-imageReorderer-item">
        <img src="

myImage3.jpg" alt="

image 3 thumbnail" />
        

<span"

>Image 3</span>

<input name="

image 3" value="

2" type="hidden" /> 
    

</a>
    ...

</form>

...

Step 2: Write the script

...

Step 3: Add the script to your HTML

...