Front-end (jQuery Plugins)

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: 'http://dam.brix.ch/anura', 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 a 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'});

Minimal Example

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

<!DOCTYPE HTML>
<html>
<head>
    <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/jquery.anura.gallery.css" rel="stylesheet" type="text/css"/>
    <link href="css/jquery.anura.tree.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <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/jquery.anura.gallery.min.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 = 'https://dam-demo.brix.ch/anura/demo', locale = 'en'; // base settings

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

            $('#anura-tree').anuraTree({ // initialize a tree on <div id="anura-tree"></div>
                server: server,
                locale: locale,
                node: {kind: 101, id: 1337}, // folder with ID 1337
                show: true // show the first sub-folder in the gallery by default
            });
        });
</script>
</body>
</html>