Child pages
  • Tutorial - Image Reorderer

Versions Compared

Key

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

...

Section
Column
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">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
titleNote
borderStyleoutset

Wiki Markup
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
javascript
javascript

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
titleNote
borderStyleoutset

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
javascript
javascript

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

...