Child pages
  • Tutorial - Image Reorderer

Versions Compared

Key

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

...

Note
titleForm elements and the Image Reorderer

Currently the Image Reorderer is restricted limited to using <form> elements as its root container. This is a known issue and it is expected that in the future any container can be used as long as it is properly identified. For more information see (FLUID-4019).

...

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 , but you can override that if you like, but for . For this tutorial, we'll go the simple route. The default classname is stick with the defaults classname flc-imageReorderer-item, so let. Let's add that to each of the <a> elements:

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 the reorderable images. 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.

...