[MINITOC]
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](#anuragallery) - grid layout
* [anuraMasonry](#anuramasonry) - vertical layout (columns)
* [anuraCollage](#anuracollage) - horizontal layout (rows)
* [anuraTable](#anuratable) - tablular layout
* [anuraSlider](#anuraslider) - image slider (reduced functionality)
## Synopsis
#### anuraGallery
```js
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
```js
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
```js
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 partially 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
```
#### anuraMasonry
```js
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
inline: false //display the alternative name in addition to the name inline, not used when "always" it true
},
assets: null, // load a defined list of assets from somewhere else
autoload_fetch: 50, // 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
column_class: 'anura-masonry-col-5', // class to assign to each asset, used by masonry to determine the column width (build-in are anura-masonry-col-n, n = [2..9])
detail_settings: {}, // settings to pass to anura.details.js
detail_trigger: true, // listen to the details=... parameter and show the assets details view (regardless of actual navigation context)
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
highres_thumbs: false // masonry upscales -> thumbs may be blurry - set this to true to use previews (up to 1024px) instead
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: '', // ISO 639-1 code, blank for default
masonry: {columnWidth: '.anura-asset-container', percentPosition: true, horizontalOrder: true}, // masonry-specific settings, see https://masonry.desandro.com/options.html
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: 'auto', // 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)
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
```
#### anuraSlider
```js
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.
##### sort
> type: Object or String, required: no, default null
How the displayed asset should be sorted. Example: `sort: {order: 'name', seq: 'asc'}`
* `order`: One of `id`, `name`, `rank` or `score` (when searching), `uploaddate`, `lastmodified`, `extension`, `assettype`, and since 2.9 `original`/`originalname`, `size`/`filesize`, `info_{infofield-id}` _(Note: not all types are supported, see CELUM)_
* `seq`: One of `asc`, `desc`
> > > > > You can also pass this as a string if you prefer, e.g. `order: 'name_asc'`
##### extended
> type: boolean, required: no, default: false (except in anuraTable)
Request extended asset information in the list response (which would otherwise require a details-call per asset). Has no effect out-of-the-box, other than you might use it in a custom callback. Note that anuraTable always sets this to `true`.
Extended properties include: file size, creation date, modification date, number of pages, download availability, asset type, asset availability.
##### infofields
> type: array of long, required: no, default: []
Loads the content of the listed information field ID in the list response (which would otherwise require a details-call per asset). Has no effect out-of-the-box, other than you might use it in a [custom callback](/anura/frontend/snippets#simple-example). Use sparingly!
##### state
> type: String, required: no, default: ''
Prefix for the state fragment in the URL (only needed for multi-instance). Set to `false` to completely disable state (deep linking through updating the URL fragment)
## Source options
These define what assets to display, e.g. where to get them from. This can be one of: an array of [assets](#assets) (loaded externally), a [node](#node), a [search](#search) term or the [top](#top) downloads (checked in that order, so if you specify multiple of these, the first one will be used)
> > > Usually your [navigation](/anura/frontend/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](#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](/anura/api#search) 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 or to `false` to disable pagination (this *may* hang up the browser if you have a lot of assets in the request). Since 2.9 you can also pass `'button'`, which is identical to `'auto'` except it doesn't load new assets automatically.
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. Disables pagination and is only useful if you want to show a predetermined number of assets, such as the "5 newest assets", or for anuraSlider as it obviously doesn't paginate.
##### 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:
* `anura` (preferred, since 2.9, through jquery.anura.lightbox.js)
* `colorbox` (through jquery.colorbox-min.js)
* `details` (colorbox + anuraDetails)
* `slimbox` (through slimbox2.js)
* `swipebox` (through baguetteBox.min.js)
* `download` (directly triggers a download)
* `function(item) {}` (your custom callback function)
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](/anura/frontend/misc#details) settings.
* `detail_trigger: true` - can be set to `false` to disable deep linking of the detail view through the `#details=123` URL fragment. When enabled the URL can be sent to another person, such that it opens that exact asset in the detail view when visiting said link, regardless of any navigation context.
* `stream: false` - can be set to true to enable audio- and video-streaming directly from the CELUM server. This may overload your server however, so the preferred method is to use a video streaming provider, such as YouTube, Vimeo or MovingImage (all of which are supported transparently through their respecive Backstage connectors).
* `autoplay: true` - can be set to `false` so that videos don't start playing automatically in the detail view.
* `lightbox_rel: 'lightbox-anura'` - can be used to override the `rel` tag used by some lighboxes. Useful if you have multiple main views on a single page but don't want the next/prev buttons in your lightbox to iterate over all visible assets of all views instead of just a single view.
##### download_menu
> type: boolean, required: no, default: true
Shows the download menu when hovering over a thumbnail, comprised of the basket icon (unless [basket](#basket) is *null*) and direct download icons (these may depend on the backend's [quickDownload](/anura/backend#anura-1-quickdownload) setting).
Advanced users may want to customize the menu:
* `download_directly: true` - can be set to `false` in order to hide the direct download icons, so only the basket remains.
* `force_zip: false` - can be set to `true` so that downloads are always delivered in a ZIP file, even if it's just a single file. This may be helpful to prevent "security" software from bocking downloads.
* `send: 6` - to add a _mailto_ link that downloads the file directly in a specific download format ID (6 in this example)
##### basket
> type: jQuery object, required: no, default: null
The [download basket](/anura/frontend/misc#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](#detail_view). Specifying nothing will disable the basket feature.
##### alternative_name
> type: Object, required: no, default: null
Use an information field as the display name instead of the asset name. This is useful when used with localized information fields, as the asset name is not localizable in CELUM. By default this only affects the caption in the lightbox.
Example: `alternative_name: {id: 123, always: true}`
Options:
* `id` (long) - the ID of the information field to use (required)
* `always` (bool) - always display infofield as the name, not just as the caption for the [detail_view](#detail_view)
* `tooltip` (bool) - use it as a tool tip (alt tag) on the thumbnail _(anuraGallery and anuraMasonry)_
* `heading` (string) - Column heading when used in the column type `alt_name` _(anuraTable only)_
* `inline` (bool) - display the information field below the asset name, e.g. for a description _(anuraMasonry only)_
## Specific Options
### anuraGallery
```$('#your-target').anuraGallery({server: '...', ...});```
##### size
> type: String, required: no, default: 'medium'
Convenience function to set the size of the gallery thumbnails. You could also just simply set (or override) this via CSS by targeting `.anura-gallery-container(.medium) .anura-asset-container`. One of: `small` (~120px), `medium` (~170px), `big` (~220px), `huge` (~280px - note that this loads the preview file instead of the thumbnail)
##### thumbs_as_background
> type: boolean, required: no, default: false, since: 2.8
Set the thumbnail as a background image of `.anura-image-container` instead of adding an inner `` tag. Doesn't work in IE (what a surprise 😒).
### anuraMasonry
```$('#your-target').anuraMasonry({server: '...', ...});```
##### masonry
> type: Object, required: yes, default: {columnWidth: '.anura-asset-container', percentPosition: true, horizontalOrder: true}
Additional masonry-specific settings, see [masonry.desandro.com](https://masonry.desandro.com/options.html) for details.
##### column_class
> type: String, required: yes, default: 'anura-masonry-col-5'
Class to assign to each asset, used by masonry to determine the column width (built-in ones are anura-masonry-col-n, where n = [2..9], e.g. anura-masonry-col-3)
> > > > > > To make the columns responsive, you can (depending on the value you chose here) add CSS like:
```css
@media screen and (max-width: 768px) {
#anura-masonry .anura-masonry-container .anura-asset-container {
width: calc(50% - 10px); /* 2 columns */
}
}
@media screen and (max-width: 375px) {
#anura-masonry .anura-masonry-container .anura-asset-container {
width: calc(100% - 10px); /* 1 column */
}
}
```
##### highres_thumbs
> type: boolean, required: no, detault: false
Use high resolution thumbnails (i.e. preview files up to 1024px), as depending on your column width portrait thumbs may look blurry. Note that this obviously uses more bandwidth and may slow things down a bit.
### anuraCollage
```$('#your-target').anuraCollage({server: '...', ...});```
##### target_height
> type: int, required: yes, default: 150
The desired height of a single row in pixels.
##### caption
> type: boolean, required: no, default: true
Whether to show the caption of the image when hovering over its thumbnail.
##### partial_row
> type: boolean, required: no, default: true
Allow the last row to be only partially filled (may causes last row to be higher than expected)
### anuraTable
```$('#your-target').anuraTable({server: '...', ...});```
##### columns
> type: array of String, required: yes, default: ['name', 'size', 'date', 'download']
What columns to display in the table. Any of `id`, `name`, `icon`, `thumb`, `size`, `extension`, `created_date`, `created_time`, `created_date_time`, `modified_date`, `modified_time`, `modified_date_time`, `download`, `pages`, `alt_name` or any other property returned by the API. Infofields with info.x, e.g. `info.101`.
##### headings
> type: map of Strings, required: no, default: {}
Column headings that should be used for columns that are not supported out-of-the-box, e.g. `headings: {'info.101': 'Copyright', ...}`
##### hover_thumbnail
> type: boolean, required: no, default: true
Show a thumbnail tooltip when hovering over a row.
##### sortable
> type: boolean, required: no, default: true
Enable sorting columns by clicking on the table headers. Note that this only works on columns supported through the [sort](#sort) parameter (i.e. through CELUM).
##### icons
> type: mixed, required: no, default: true
**DEPRECATED**, use columns (`icon` or `thumb`) instead.
Show file type icons at the start of every row - `true` to show file type icons or `'thumbs'` to show tiny thumbnails.
##### use_create_date
> type: boolean, required: no, default: false
**DEPRECATED**, use columns `created_date`, `created_time`, `created_date_time`, `modified_date`, `modified_time` or `modified_date_time`.
Whether the creation date should be used for the `date` and `time` columns (instead of the modification date)
##### row_trigger
> type: boolean, required: no, default: false
Whether to add a click trigger to every cell of the row (except download) that will open the lightbox
##### text_length_limit
> type: boolean | int, required: no, default: false
Whether to forcefully truncate cell content after the specified number of characters. CSS `text-overflow: ellipsis;` is preferable, but this is a table, so yeah.
##### secondary_order
> type: Object, required: no, default: {}, since: 2.9.35
When `sortable` is enabled, it might be desirable to define a secondary sort order. This is achieved by specifying a sort order and sequence per column name, e.g. ` {date: 'name_asc'}` would sort by the asset's name as a secondary order after date.
### anuraSlider
```$('#your-target').anuraSlider({server: '...', ...});```
##### slider
> type: Object, required: yes, default: {adaptiveHeight: true, auto: true, preloadImages: 'visible', mode: 'fade', captions: true}
Slider options to pass to bxSlider, see [bxslider.com/options](https://bxslider.com/options) for details.
## DOM
### anuraGallery
```html
Athene Cunicularia
A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg
```
## Events
* anura-loaded (options, assets) - triggered when the plugin has loaded any page
* anura-loaded-first(options, nrOfTotalAssets) - triggered when a plugin has loaded the first page
* anura-download(assetId, formatId) - triggered when a download occurs via the [download_directly](#download_menu) feature
* anura-error(response) - triggered when a http error occurs