Front-end (jQuery Plugins) brix:anura

For the most up-to-date documentation, please visit

Present selected images and videos from CELUM directly on any web page. Simple, fast and effective. brix:anura consists of a celum extension for the backend and a modular collection of jQuery plugins. All plugins can handle the three container types (folders, keywords and asset collections).

The front-end of brix:anura is written completely in jQuery, allowing it to be integrated into practically any page without much effort. Suppose you have the following container on your page:

<div id="gallery"></div>

All it then takes is a single Javascript call, such as:

$('#gallery').anuraGallery({server: '', node: {kind: 101, id: 3051}});

That way, there's usually no need to also customize the CMS, except if you wish to control what container should be loaded in your CMS.

The back-end is a celum extension that delivers all necessary information using JSON in an efficient manner. It uses a regular celum user (reader), so you can configure the permissions of brix:anura using the familiar celum permission dialog. All other options are set in the front-end, enabling the extension to feed any number of different galleries.

Dynamic calling

The plugins are set up in such a way that an additional call on the same target retains the original settings. This allows you to set additional options afterwards.

Example: Execute a search on the gallery we've created in the introduction:

$('#gallery').anuraGallery({search: {string: 'my search'});

This means you don't have to specify the server URL etc. again.

Or if you just want to change the language to German (e.g. from a language dropdown), simply pass:

$('#gallery').anuraGallery({locale: 'de'});

Who does the work?

When implementing Anura it's important to understand that the website serving the front-end code experiences no significant load of its own - all it has to do is serve a bit of HTML and a few JavaScript and CSS files (i.e. you could do this on a potato). Everything else happens either in the user's browser or in CELUM:

anura flow diagram

Minimal Example

Just a navigation tree and a gallery, without anything else:

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Anura Minimal Example</title>
    <link href="css/" rel="stylesheet" type="text/css"/>
    <link href="css/jquery.anura.tree.css" rel="stylesheet" type="text/css"/>
    <div id="anura-tree"></div>
    <div id="anura-gallery"></div>

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.anura.util.min.js" type="text/javascript"></script>
    <script src="js/" type="text/javascript"></script>
    <script src="js/jquery.anura.tree.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var server = '', locale = 'en'; // base settings

            var gallery = $('#anura-gallery').anuraGallery({ // initialize an empty gallery on <div id="anura-gallery"></div>
                server: server,
                locale: locale,
                detail_view: 'none'

            var tree = $('#anura-tree').anuraTree({ // initialize a tree on <div id="anura-tree"></div>
                server: server,
                locale: locale,
                node: {kind: 101, id: 12246}, // show structure below the folder with ID 12246
                show: true, // show the first sub-folder in the gallery by default, you may also specify a child ID to be loaded
                callback: function(server, kind, id, name) { // what happens when a node/leaf is clicked
                    gallery.anuraGallery({server: server, assets: null, node: {kind: kind, id: id}}); // tell the gallery to load the clicked node

Complete layout

Here's a completely layouted example sporting faceted search and extra settings: