Repeater Thumbnail View repeater-thumbnail.js

The repeater thumbnail view plug-in will render data in customizable thumbnails, with many options and methods to suit your needs.

Example

Awesome Repeater
- of items
Per Page
Page
    of

    Usage

    The repeater thumbnail plug-in extends repeater functionality. This plug-in follows the steps specified in the repeater docs. You can also use the following additional features:

    Data Source

    The dataSource function behaves as described in the repeater docs. However, the function requires a few additional parameters on the returned data object to render the data properly:

    Attribute type description
    items array Array of objects representing the thumbnails that will be displayed within the repeater. The item objects can contain any number of attributes, although attributes with certain names will be used to render the thumbnail. In the default thumbnail template, the `src` and `name` attributes are expected.

    Options

    You can pass options via Javascript upon initialization.

    Name type default description
    thumbnail_alignment string 'justify' Specifies the alignment of rendered thumbnails. The options for the alignment of thumbnails include 'left', 'center', 'justify', 'right' or 'none'
    thumbnail_infiniteScroll boolean or object false Dictates whether the repeater thumbnail view should utilize infinite scrolling instead of pagination. A true value enables infinite scrolling with default settings. Additionally, you can set this value to an object with attributes matching the options available in the infinite scroll control. This option allows for further customization and ignores the dataSource option.
    thumbnail_itemRendered function null The repeater calls this function after the repeater renders each item, passing a a helpers object and callback function as arguments. The helpers object includes itemData, parent container, and current thumbnail item as attributes, if available. Once ready, call the callback function in order to continue with rendering.
    thumbnail_selectable boolean or string false Specifies whether a user can select rendered thumbnails. If you set the value to true, users can select only one thumbnail at a time. If you set the value to 'multi', users can select multiple thumbnails at once.
    thumbnail_template string 
    
<div class="thumbnail repeater-thumbnail"><img height="75" src="{% raw %}{{src}}{% endraw %}" width="65"><span>{% raw %}{{name}}{% endraw %}</span></div>
    		Dictates the template used to render the repeater thumbnails. Mustache/Handlebar-style syntax ('{% raw %}{{example}}{% endraw %}') can be used to specify where various attribute values will be inserted. NOTE: only the immediate decendents of the thumbnail item object can be referenced; all other Mustache/Handlebars functionality not supported.

    Methods

    .repeater('thumbnail_clearSelectedItems');

    Clears any currently selected thumbnail items. You can use selectable thumbnail items only by enabling the thumbnail_selectable option.

    $('#myRepeater').repeater('thumbnail_clearSelectedItems');

    .repeater('thumbnail_getSelectedItems');

    Returns the currently selected thumbnail items in an array. You can use selectable thumbnail items only by enabling the thumbnail_selectable option. 

    $('#element').repeater('thumbnail_getSelectedItems');

    .repeater('thumbnail_setSelectedItems');

    Set the selected thumbnail items for the current displayed data. This function accepts an array of items objects and force boolean as arguments. 

    $('#myRepeater').repeater('thumbnail_setSelectedItems', [ {...}, ...]);
    Parameter description
    items Required Array of items objects. The items objects specify which thumbnails to select with attributes to identify the item. If the items object contains an index property, the method will select the matching thumbnail index within the currently displayed data. If the items object contains a selector property, the method will select any thumbnails matching that selector.
    (ex: [ { index: 4 }, { selector: '.coolThumbnail' } ] )
    force Optional Boolean specifying whether to ignore current thumbnail_selectable mode when selecting items. This value defaults to false and allows only one selectable item if thumbnail_selectable does not equal 'multi', regardless of how many items are passed into the items array parameter. Set the value to true to override this behavior and select all provided items.

    Events

    Event Type Description
    deselected.fu.repeaterThumbnail If thumbnail_selectable is enabled, fires whenever the user deselects a thumbnail. Provides an event object and the deselected thumbnail as arguments.
    selected.fu.repeaterThumbnail If thumbnail_selectable is enabled, fires whenever the user selects a thumbnail. Provides an event object and the selected thumbnail as arguments.

    All repeater-thumbnail events are fired on the .repeater classed element.

    
$('#myRepeater').on('selected.fu.repeaterThumbnail', function () {
    // do something…
});