[MINITOC] 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](http://jquery.com/) 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: ```html ``` All it then takes is a single Javascript call, such as: ```js $('#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: ```js $('#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: ```js $('#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](anura_flow.png) ### Minimal Example Just a navigation tree and a gallery, without anything else: ```html Anura Minimal Example
``` ## Complete layout Here's a completely layouted example sporting faceted search and extra settings: [anura-example.zip](anura-example.zip) ![anura-example](anura-example.jpg)