Old front-end (jQuery) brix:anura

This is the old front-end written in jQuery. Please consider upgrading to Webcomponents. We will still maintain this version, but new features will only be added to the new one.

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 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

Mix and match

Pick the plugins you need, and hook them up to one another as you please. Every component operates independently, but can be hooked up to another component, e.g. a navigation tree can tell the main view what content to display.

components

This is what enables you to just import the plugins into any existing page, and put each plugin where you need it to be, e.g. the navigation can be put into the existing sidebar of your website. You can even use the same components multiple times on the same page, if that's something you need (just provide a distinct state parameter).

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

            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
                }
            });
        });
</script>
</body>
</html>

Complete layout

Here's a completely layouted example sporting faceted search and extra settings: anura-example.zip

anura-example