...
Let's suppose you have some simple markup displaying your image collections. To use the Image Reorderer, your image thumbnails must each be within a <div> element, and the collection of thumbnails must be contained within an element. A simple example of this could be:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html> <head> <form action="#" id="reorder-images-form"> <div> <a href="Dragonfruit.jpg"> <img src="Dragonfruit.jpg" alt="Dragonfruit thumbnail" /> <span">Dragonfruit</span> <title>Image Collection</title><input name="dragonfruit" value="0" type="hidden" /> </head>a> <body><a href="Dragonfruit.jpg"> <div> <div><img<img src="img1Dragonfruit.jpg"/></div> alt="Dragonfruit thumbnail" /> <span">Dragonfruit</span> <input name="dragonfruit" value="0" type="hidden" /> </a> <div><img<a srchref="img2Dragonfruit.jpg"/></div>> <div><img<img src="img3Dragonfruit.jpg"/></div> alt="Dragonfruit thumbnail" /> <span">Dragonfruit</span> <input </div>name="dragonfruit" value="0" type="hidden" /> </body> </html>a> ... |
...
Step 2: Write the script
...
Step 3: Add the script to your HTML
...