...
| Section |
|---|
| Column |
|---|
| 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">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>
|
|
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #D3E3C4 |
|---|
| title | Note |
|---|
| borderStyle | outset |
|---|
| As with the ID on the <form>, we can use any jQuery selector. For example, we could attach a unique ID to each movable <a> with a unique prefix, maybe pic-movable1, pic-movable2, etc. Then we could use the jQuery selector [id^=pic-movable] to override the default selector. |
|
|
...
Step 2: Write the script
You'll need to create a file to contain your initialization script - the script you write to apply the Reorderer to your image collection.
| Section |
|---|
| Column |
|---|
Create a file, say image-collection.js, and in this file, write a function that looks like this: | Code Block |
|---|
|
jQuery(document).ready(function () {
return fluid.reorderImages("#reorder-images-form");
});
|
In this function call, the parameter to reorderImages(), "#reorder-images-form", is a jQuery selector identifying the element with the ID reorder-images-form. That's all the information required by the fluid.reorderList() function. By enclosing the function call inside jQuery(document).ready(), we ensure that the HTML is fully rendered before we apply the Reorderer to it. |
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #D3E3C4 |
|---|
| title | Note |
|---|
| borderStyle | outset |
|---|
| If you choose to use a custom selector for the movable items (instead of the default classname), you can override the default using options passed as the second parameter. Define an options block that specifies the selector you'd like, and pass it to the function: | Code Block |
|---|
|
jQuery(document).ready(function () {
var opts = {
selectors: {
movables: "[id^=pic-movable]"
}
};
return fluid.reorderImages("#reorder-images-form", opts);
});
|
For more information on selectors and other options, see the Image Reorderer API documentation. |
|
|
...
Step 3: Add the script to your HTML
...