For the most up to date documentation please visit docs.brix.ch



Name Example Default Comment
asset 4123 required ID of the asset to show the details of (replaces the usual node: {kind: 0, id: 0})
locale 'de' - Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
show ['infofields','general'] ['general','infofields','pages','downloads','links'] Which detail components to show and in what order - any of: infofields, general, keywords, keyword_links, keyword_paths, keyword_path_links, downloads, pages, links, similar, function (asset_id, metadata, table, options) {}
alternative_name 16 - Alternative image caption instead of the asset name (information field id)
send 6 false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
split true false put the widgets into individual tables instead of one big one
callback function(options, data) {...} - function that should be called after loading
download_directly false true download: show direct download links (otherwise only the basket is available)
show_dlf_description true true download: show the description of the download formats on an extra line (instead of the tooltip)
icon_transform function(icon) {return icon.replace('/dark/', '/light/')} function(icon) {return icon.replace('/big/', '/small/')} download: icon transformation callback to change size/color
paginator_nav {prev: '<', next: '>'} {prev: '←', next: '→'} pages: text or html to use to the left/right nav arrows
paginator_target '#yourLightbox .theImg' '#cboxContent .cboxPhoto' pages: target selector for the page switcher
infofield_transform {3: function(info) {return 'Hello '+info.value+'!'}} - infofields: map of infofieldId->function to transform infofield content
infofield_sort function(a, b) {...} localeCompare on name infofields: custom sorting function to determine the order of the infofields


  • anura-loaded (options, data) - triggered when the plugin has loaded all the detail information


<div class="anura-details-container">
   <table class="anura-table-0">
         <tr class="title general">
            <td colspan="2">Object Details</td>
         <tr class="general">
            <td class="anura-name">Name</td>
            <td class="anura-value">Athene Cunicularia</td>
         <tr class="general"><!--etc--></tr>
         <tr class="title infofields">
            <td colspan="2">Information Fields</td>
         <tr class="infofield">
            <td class="anura-name">Description</td>
            <td class="anura-value">A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg</td>
         <tr class="infofield"><!--etc--></tr>
         <tr class="title download">
            <td colspan="2">Download Formats</td>
         <tr class="basket">
            <td colspan="2">
               <a class="anura-details-download">
                  <div class="basket-img"></div>
                  <div class="anura-details-download-name">Add to basket</div>
         <tr class="dlf">
            <td colspan="2">
               <a class="anura-details-download">
                  <img src="...">
                  <div class="anura-details-download-name" title="Original Format">Original Format</div>
         <tr class="dlf"><!--etc--></tr>



The basket functionality is available in Gallery, Masonry and Table. Use this object for their basket-parameter.

Name Example Default Comment
add [asset_id1, asset_id2, ...] null Assets to add to the basket (int or array of int)
remove [asset_id1, asset_id2, ...] null Assets to remove from the basket (int or array of int)
action 'show' - Action after initialization, one of: show, hide, toggle or clear
force_zip true false Force even single asset downloads to be delivered in a ZIP-file
cookies false true Use cookies to persist the basket (requires jquery.cookies.js). Provide a string instead to differentiate multiple baskets, e.g. cookies: 'foo' will use the cookie 'anura-basket-foo'.
send 6 false adds a "mailto" hyperlink (ID of the download format to use or true for the first)
terms_and_conditions {title: 'T&C', message: 'Lorem ipsum', confirm: 'I agree'} null show terms and conditions - when the confirm-parameter is present, a checkbox will appear and hide the download buttons until you check it. Localize any of the three texts by providing {de: 'Ich bin einverstanden', en: 'I agree'} instead of just a string
icon_transform function(icon) {return icon.replace('/dark/', '/light/')} function(icon) {return icon.replace('/big/', '/small/')} Icon transformation callback to change size/color
clear_after_download false true Clears the basket when the download starts
show_description false true Show the description of the download formats as a second line (instead of a tooltip)

If your basket target element contains a span (preferably with the class counter), the number of assets in the basket will be updated there,
i.e. <div id="anura-basket">Basket (<span class="counter">7</span>)</div>


<div id="anura-basket-overlay">
   <div class="anura-basket-popup anura-locale-">
      <div class="anura-basket-popup-titlebar"><span>×</span></div>
      <div class="anura-basket-thumbs">
         <div class="anura-basket-thumb"><img src="...">
            <div class="anura-basket-thumb-delete hover"></div>
         <div class="anura-basket-thumb"><!--etc--></div>
      <div class="anura-basket-download">
         <h3 class="anura-basket-download-title">Download:</h3>
            <div class="anura-basket-download-holder">Download Format X</div>
            <div class="anura-basket-download-holder"><!--etc--></div>
         <h3 class="anura-basket-download-send">Send:</h3>
            <div class="anura-basket-download-holder mailto">Send Hyperlink</div>
         <span class="anura-basket-reset">clear</span>

Authenticating against CELUM

If you are using the anuraLoginTokenVerifier to protect Anura, the following provides an example of how you'd do that in the front-end:

$(document).ready(function () {
    var baseUrl = 'http://your.celum.server/';
// login and token handling:
    $.anura.onRequestFailure = function(response) { // access denied -> go to login (either for the first time or to refresh to token
        if (response && response.status === 403)
            window.location.href = baseUrl + 'anuraLoginToken/login?to=' + encodeURIComponent(window.location.href);
    $.anura.tokenProvider = function() { // where the other anura components get their token from
        var token, variables = window.location.search.substring(1).split('&');
        for (var i = 0; i < variables.length; i++) { // get return variables from login
            var param = variables[i].split('=');
            switch (param[0]) {
                case 'token': token = param[1]; break;
                case 'endpoint': localStorage.setItem('endpoint', param[1]); break;
        if (token) { // new token -> store it
            localStorage.setItem('token', token);
            history.replaceState('', document.title, window.location.href.replace(/[?&](token|endpoint)=[^&#]*/g, ''));
        } else { // get existing token from storage
            token = localStorage.getItem('token');
            if (token == null) window.location.href = baseUrl + 'anuraLoginToken/login?to=' + encodeURIComponent(window.location.href);
        return token;
    $.anura.tokenProvider(); // run once straight at the beginning (in order to get a token)

    // use the line below if no end point mapping is configured, because then localStorage.getItem('endpoint') will return null
    var server = baseUrl + 'anura/' + localStorage.getItem('endpoint'), locale = 'en'; // base settings
    // var server = baseUrl + 'anura/<static-end-point-name>', locale = 'en';

// other anura components as usual:
    var basket = $('#anura-basket').anuraBasket({server: server, locale: locale});
    $('#anura-gallery').anuraGallery({ // initialize an empty gallery on <div id="anura-gallery"></div>
        server: server,
        locale: locale,
        detail_view: 'slimbox',
        basket: basket
    $('#anura-tree').anuraTree({ // initialize a tree on <div id="anura-tree"></div>
        server: server,
        locale: locale,
        node: {kind: 105, id: 71}, // folder with ID 1337
        //show_root: true,
        show: true // show the first sub-folder in the gallery by default