Main Views

There are several main views - most of the parameters are applicable to all of them, and extra parameters are disregarded, allowing you to call different main views with the same parameter map. Known implementations:

  • anuraGallery
  • anuraTable
  • anuraCollage
  • anuraSlider

Synopsis

anuraGallery

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: true, // always use the alternative name, not just for detail view
    tooltip: false // also display it as the title tag on the thumbnails
},
assets: null, // load a defined list of assets from somewhere else
autoload_fetch: 32, // how many assets to fetch at once when paginage is set to 'auto'
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: false, // make the different formats available directly in the menu
download_menu: true, // show the download menu
extended: false, // request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
infofields: [] // list of information field IDs to load with the list response (use sparingly)
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false, // show assets that have node referencing infofields to this node, 2.x
paginate: 12, // how many items to show per page, false to show all, 'auto' to load on scroll
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, custom: ''},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
size: 'medium',
sort: null, // order: one of [id, name, uploaddate, lastmodified, extension, assettype], seq: asc or desc - i.e. {order: 'name', seq: 'asc'}
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: true, // enables audio and video streaming - use with caution, might overload the server
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraTable

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: false, //always use the alternative name, not just for slimbox
    heading: '' // title when used in column
},
assets: null, // load a defined list of assets from somewhere else
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
columns: ['name', 'size', 'date', 'download'], // any of: name, thumb, size, extension, date, time, download, pages, alt_name or any other property returned by the API. Infofields with info.x, e.g. info.101
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: true, // make the different formats available directly
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
headings: {}, // headings that should be used for non-supported columns ({key: value, ...})
hover_thumbnail: true, // show a thumbnail tooltip when hovering over a row
icons: true, // true to show file type icons or 'thumbs' to show tiny thumbnails
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
paginate: 16, // how many assets to fetch at once when paginage is set to 'auto'
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, keyword: 0},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
sortable: true, // enable sorting columns by clicking on the table headers
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: false, // enables audio and video streaming - use with caution, might overload the server
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraCollage

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: false //always use the alternative name, not just for slimbox
},
assets: null, // load a defined list of assets from somewhere else
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
caption: true, // show caption (name of the asset) on mouse over
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: false, // make the different formats available directly
download_menu: true,
ext: '.do?', // extension of server pages (.php, .do)
extended: false, // request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
paginate: false, // how many items to show per page, false to show all
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
partial_row: true, // allow the last row to be only partialy filled (may causes last row to be higher than expected)
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, keyword: 0},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
sort: null, // custom sorting function(a, b) - see http://mzl.la/17qY6s9
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: false, // enables audio and video streaming - use with caution, might overload the server
target_height: 150, // desired height of a row
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraSlider

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: 0, // alternative name for caption (information field ID)
ext: '.do?', // extension of server pages (.php, .do)
limit: 16, // limit number of assets that should be loaded (since 2.1)
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
slider: {adaptiveHeight: true, auto: true, preloadImages: 'visible', mode: 'fade', captions: true}, //slider options, see bxslider.com/options
sort: null, // custom sorting function(a, b) - see http://mzl.la/17qY6s9
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

General options

server

type: URL, required: yes, default: -

The endpoint to use, e.g. http://your.celum.server/anura/first

locale

type: String, required: no, default: CELUM's default language

The locale (ISO 639-1) to use, i.e. en. The availability of these depend on your CELUM configuration, usually en, de or fr. When left empty, CELUM's default language will be used.

Source options

These define what assets to display, e.g. where to get them from. This can be one of: an array of assets (loaded externally), a node, a search term or the top downloads (checked in that order, so if you specify multiple of these, the first one will be used)

Usually your navigation component will inject these parameters, so you don't have to specify these unless you don't use a navigation component or wish to use a different initial view.

Source: Node

node

type: Object, required: no, default: {kind: 101, id: 0}

The node to display directly, i.e. {kind: 103, id: 1337}. Note that since CELUM 5, the kind-parameter is no longer required unless you set the ID to -1.

node.kind

type: long, required: seldom, default: 101

The NodeTypeId of the desired node. Traditionally folder = 101, collection = 102 and keywords = 103, but check your tabconfiguration.xml to be sure. Since CELUM 5 this is only required when you set the node.id to -1.

node.id

type: long, required: if node is specified, default: 0

The NodeId of the node to display.

recursive

type: boolean, required: no, default: false

Load all assets below the specified node.id recursively, like the "show content of subnodes" feature in CELUM.

noderef

type: boolean, required: no, default: false

Load all assets that reference the specified node.id via a node referencing information field, like the "navigation context" feature in CELUM.

Source: Search

search

type: Object, required: no, default: {string: '', node: 0, custom: ''}

search.string

type: String, required: no, default: ''

The (full text) search term to search for, e.g. 'ponies'.

search.node

type: long, required: no, default: 0

The ID of the node to restrict the search to.

search.custom

type: String, required: no, default: ''

Any additional search parameters you want to add (in URL form), e.g. search_foo=1&search_bar=2, see the API for details.

Source: Statistics

top

type: Object, required: no, default: {number: 0, days: 0}

Show the top X downloaded assets within the last Y days.

top.number

type: long, required: no, default: ''

How many top downloads to fetch, e.g. 10 max. 100.

top.days

type: long, required: no, default: 0

How many days to look back, e.g. 30, max. 365.

Source: External

assets

type: Array, required: no, default: null

Display exactly the assets in the array. Called by other components, so you probably won't ever use this yourself, unless you compute the array via several manual API-requests or have some static content (read: don't touch this ;-)

E.g. [{"id":1337,"type":1,"name":"pic_12_001.jpg","alt_name":"This is an example"},{"id":1338,"type":2,"name":"api_demo.odt","alt_name":"Demonstration of the API"}]

View options

paginate

type: mixed, required: no, default: 12

How many assets to display per page. Set to 'auto' to activate infinite scrolling (in anuraGallery and anuraTable) or to false to disable pagination (this may hang up the browser if you have a lot of assets in the request)

Advanced users may want to customize the pagination:

  • paginator: ['prev', 'next', 'pages', 'counter'] - which pagination features to display in what order. Available features : 'prev', 'next', 'pages', 'dots' (instead of pages) and 'counter'.
  • paginator_nav: {prev: '←', next: '→'} - which symbols (or HTML) to use for the prev/next-arrows
  • autoload_fetch: 50 - how many assets to load each time the user has scrolled to the bottom of the list, only applies when using paginate: auto
  • limit: 5 - hard-limits the assets that get loaded, regardless of the actual count. Disabled pagination and is only usefull if you want to show a predertermined number of assets, such as the "5 newest assets".

detail_view

type: String, required: no, default: 'colorbox'

Action triggered when a thumbnail is clicked. Lightboxes require you to also embed the respective lighbox JS. Known values:

  • colorbox (through jquery.colorbox-min.js)
  • details (colorbox with anuraDetails)
  • slimbox (through slimbox2.js)
  • swipebox (through baguetteBox.min.js)
  • download (directly triggers a download)
  • function(item) {} (your custom callback fundtion)

Advanced users may want to customize the lightbox:

  • detail_settings: {} - settings passed to the lighbox (depends on your lighbox), or in the case of 'details' the anuraDetails settings.

download_menu

type: boolean, required: no, default: true

Shows the download menu when hovering over a thumbnail, comprised of the basket icon (unless basket is null) and direct download icons (these may depend on the backend's quickDownload setting).

Advanced users may want to customize the menu:

  • download_directly: false can be set to hide the direct download icons, so only the basket remains.
  • force_zip: true can be set to always deliver downloads in a ZIP file, even if it's just a single file. This may be helpfull to prevent "security" software from bocking downloads.
  • send: 6to add a mailto link that downloads the file directly in a specific download format (6 in this example)

basket

type: jQuery object, required: no, default: null

The download basket to use where the user can collect assets to download, as returned by your $.anuraBasket()-call. This enables the corresponding basket buttons in the download_menu and detail_view. Specifying nothing will disable the basket feature.

Old doc format

Gallery

$('#your-target').anuraGallery({server: '...'});

Options
Name Example Default Comment
size 'small' medium Size of the thumbnails. One of: small, medium, big, huge
locale 'de' - Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
detail_view 'slimbox' colorbox Action triggered when a thumbnail is clicked. One of: slimbox, colorbox, details (colorbox with anuraDetails), swipebox, function(item) {}, download (with detail_settings: {format: }), blank, none
detail_settings {} - Optional settings for the specified detail_view (see respective documentation). For 'details' {hidden: true} to hide the sidebar by default.
download_menu false true Shows download format icons when hovering over a thumbnail. Uses the formats that are available to the backend user (unless disabled via download_directly)
force_zip true false Force even single asset downloads to be delivered in a ZIP-file
alternative_name {id: 16, always: true} - Use the value of an information field instead of the asset name in the lightbox. id of the information field, always to also display said value underneath the thumbnail instead of its name. tooltip to also use that name in the image's title tag.
search {string: 'my search', custom: 'search_node=123'} - Executes a search for my search. You may add additional custom parameters (see Anura API)
basket $('.anura-basket') - Activates the basket functionality (add several assets to a basket and download all of them in a ZIP). basket is the DOM-element on which the basket was created.
type_filter [1, 2] - Filter results so that only assets of the listed type are shown. Types in celum are: 1 image, 2 document, 3 video, 4 audio, 5 text, 0 unknown. (since 1.4, requires backend 1.3 or higher)
sort {order: 'name', seq: 'asc'} null {order: '?', seq: '?'} where order is one of [id, name, uploaddate, lastmodified, extension, assettype] and seq is asc or desc; or a custom sort function
video_frame_speed 500 800 speed (ms) at which video frames change when hovering - set to 0 to disable
send 6 false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
top {number: 10, days: 7} - show the top X downloads within the last Y days (replaces the node argument)
extended true false request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
stream true false enables audio and video streaming - use with caution, might overload the server
autoplay false true whether to automatically start playing (with vimeo and/or stream)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<div class="anura-masonry-container">
   <div class="anura-asset-container">
      <div class="anura-asset-menu">
         <div class="anura-asset-menu-holder">
            <a class="anura-add-basket"></a>
            <a title="Download Format X"><img class="anura-asset-menu-button"></a>
            <!--etc-->
         </div>
      </div>
      <a rel="lightbox-anura"><img class="anura-image"></a>
      <p class="anura-asset-name">Athene Cunicularia</p>
      <p class="anura-asset-alternative-name">A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg</p>
   </div>
   <div class="anura-asset-container"><!--etc--></div>
   <div class="anura-asset-container"><!--etc--></div>
   <!--etc-->
</div>

Table

$('#your-target').anuraTable({server: '...'});

Options

requires backend version 1.3 or higher

Name Example Default Comment
node {kind: 101, id: 1234} - kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
paginate 12 24 Number of thumbnails per page or false to disable pagination
locale 'de' - Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
columns ['size', 'download'] 'name, 'size', 'date', 'download' Columns (and their order) to display. Any of: 'name, 'thumb', 'size', 'extension', 'date', 'time', 'download', 'pages', 'altname' or any other key returned by an API response (define headings for those using headings: {mykey: 'my title'})
detail_view 'slimbox' colorbox Action triggered when a thumbnail is clicked. One of: slimbox, colorbox, details (colorbox with anuraDetails), swipebox, function(item) {}, download (with _detail_settings: {format: }_), blank, none
detail_settings {} - Optional settings for the specified detail_view. See respective documentation
download_menu false true Shows download format icons when hovering over a thumbnail. Uses the formats that are available to the backend user (unless disabled via download_directly)
force_zip true false Force even single asset downloads to be delivered in a ZIP-file
alternative_name {id: 16, always: true} - Use the value of an information field instead of the asset name in the lightbox. id of the information field, always to also display said value underneath the thumbnail instead of its name.
hover_thumbnail false true display the thumbnail of the asset when hovering over the name (instead of 'title'-attribute)
search {string: 'my search', custom: 'search_node=123' } - Executes a search for my search. You may add additional custom parameters (see Anura API)
basket $('.anura-basket').anuraBasket({server: ...}) - Activates the basket functionality (add several assets to a basket and download all of them in a ZIP). basket specified the DOM-element on which the basket should be created. If the target contains a span it is used to display a counter of the objects in the basket.
type_filter [1, 2] - Filter results so that only assets of the listed type are shown. Types in celum are: 1 image, 2 document, 3 video, 4 audio, 5 text, 0 unknown. (since 1.4, requires backend 1.3 or higher)
sort {order: 'name', seq: 'asc'} null {order: '?', seq: '?'} where order is one of [id, name, uploaddate, lastmodified, extension, assettype] and seq is asc or desc; or a custom sort function
sortable false true enable sorting by clicking on the column headers
send 6 false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
top {number: 10, days: 7} - show the top X downloads within the last Y days (replaces the node argument)
stream true false enables audio and video streaming - use with caution, might overload the server
autoplay false true whether to automatically start playing (with vimeo and/or stream)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<div class="anura-table-container">
   <table>
      <thead>
         <tr>
            <th class="anura-column-name">Filename</th>
            <th class="anura-column-pages">Pages</th>
            <th class="anura-column-size">File size</th>
            <th class="anura-column-date">Modified date</th>
            <th class="anura-column-time">Modified</th>
            <th class="anura-column-download">Download</th>
         </tr>
      </thead>
      <tbody>
         <tr class="anura-asset-container even">
            <td class="anura-file pdf"><a rel="lightbox-anura">some.pdf</a></td>
            <td class="anura-pages">46</td>
            <td class="anura-filesize">2.02 <span class="anura-filesize-unit">MB</span></td>
            <td class="anura-modified-date">2/24/2014</td>
            <td class="anura-modified-time">1:22:53 PM</td>
            <td class="anura-asset-menu">
               <div class="anura-asset-menu-holder">
                  <a class="anura-add-basket"></a>
                  <a title="Download Format X"><img class="anura-asset-menu-button"></a>
                  <!--etc-->
               </div>
            </td>
         </tr>
         <tr class="anura-asset-container odd"><!--etc--></tr>
         <tr class="anura-asset-container even"><!--etc--></tr>
         <!--etc-->
      </tbody>
   </table>
   <div class="anura-paginator">
      <div class="anura-paginator-nav"><span class="anura-paginator-prev">←</span><a class="anura-paginator-nav-next">→</a></div>
      <div class="anura-paginator-pages"><span class="anura-active">1</span><a>2</a><a>3</a></div>
      <div class="anura-paginator-total">1 - 12 / 25</div>
   </div>
</div>

Slider

$('#your-target').anuraSlider({server: '...'});

Options

Name Example Default Comment
node {kind: 101, id: 1234} - kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
locale 'de' - Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
alternative_name 16 - Alternative image caption instead of the asset name (information field id)
slider {speed: 1024} adaptiveHeight: true, auto: true Additional options for the Slider
sort {order: 'name', seq: 'asc'} null {order: '?', seq: '?'} where order is one of [id, name, uploaddate, lastmodified, extension, assettype] and seq is asc or desc; or a custom sort function
top {number: 10, days: 7} - show the top X downloads within the last Y days (replaces the node argument)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets
Box model
<div class="bx-wrapper">
   <div class="bx-viewport">
      <ul class="anura-slider-list">
         <li>
            <img src="...">
            <div class="bx-caption"><span>my caption</span></div>
         </li>
         <li><!--etc--></li>
         <!--etc-->
      </ul>
   </div>
   <div class="bx-controls bx-has-pager bx-has-controls-direction">
      <div class="bx-pager bx-default-pager">
         <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a></div>
         <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a></div>
         <!--etc-->
      </div>
      <div class="bx-controls-direction"><a href="" class="bx-prev">Prev</a><a href="" class="bx-next">Next</a>
      </div>
   </div>
</div>