How to use?

Description is only valid for Imagov07. I'll update the docs for the newer version when i get time. Till then have a look at the examples.

You have several choices to get an Imago gallery up and running. It depends a bit on where your images are and which access method your'd like to use.

Hosting yourself

Imago uses SimpleViewers gallery description format (a small XML file). That means all gallery related infos are stored in a simple xml file. To build a gallery you can either use one of the the following tools and the templates we provide:

Or you can setup Imago manually and use any of the SimpleViewer compatible tools for generating the gallery. See the manual setup section.

Attention: Imago uses a XMLHttpRequest for retrieving the gallery.xml. Browser only fullfill this request when it points to the server the website was loaded from. Therefor it won't work locally. You need to put the on a webserver and point your browser to the url.

Using Flickr

  • flickrviewer: setup FlickrViewer and do a manual Imago setup using default GalleryLoader and changing the gallery.xml file to flickrviewer.php (if you didnt rename it)
  • MooPix : manual Imago setup and use the FlickrLoader. You need to setup MooPix first and get a flickr api key

Using SmugMug

Manual setup and the SmugmugLoader is used. You need a SmugMug API Key and MooSmug - Javascript access for SmugMug . No SmugMug User yet? Sign up and save 5$ using my referal code bPSPcLztKo8Uc .

Manual setup

Valid for v0.7 Will update infos soon.

Manual setup is straight foreward and contains only a few steps.

  1. Add the scripts and the stylesheet to your (x)html header 

    <script src="scripts/mootools.v1.11.js" type="text/javascript" />
<script src="scripts/imago.js" type="text/javascript" />
<link rel="stylesheet" href="styles/imago.css" type="text/css" />

    Your mileage may vary depending on where you store your Javascript and stylesheet files, but it should look similar to the code above.

  2. Add the following div where your gallery should be displayed 

    <div id="imagogallery" class="imagogallery" >
 this.loader = new GalleryLoader('gallery.xml', 'gallery', "Madeira");
</div>

    Required parameters:

    • loader: Class that loads the gallery definition file, i.e the gallery.xml . See the section below for available loaders

    Optional parameters:

    • prefetching: default is no prefetching at all, use 'thumb' for thumbnail prefetching and 'all' for prefetching the whole gallery (I don't recommend this for larger galleries at the moment as the whole prefetching is still under development)
    • menuDivPosition: Defines the rendering position of the menu div relative to the image frame and helps to make css styling easier. Values: top, bottom

Available gallery loaders

3 gallery loaders are currently available. More will follow or you can write your own (use FlickrLoader as an example).

GalleryLoader

Loads the gallery definition from a static or dynamically generated gallery.xml file. It does accept 3 Parameters:

  1. the gallery config filename (gallery.xml or i.e flickrViewer.php)
  2. a base url for the gallery (optional)
  3. the name of the album. (optional)

2 and 3 are useful when hosting more than one gallery on the same site and in a central folder.

Imago does understand the following attributes of SimpleViewers gallery.xml:

  • full image reading of course (filename and caption)
  • title
  • thumbnailColumns
  • thumbnailRows
  • thumbPath
  • imagePath
FlickrLoader

Loads recent images from flickr and is a basic example how to use the pure javascript Integration of flickr using Moopix. You need to configure MooPix properly

Example: 

<div id="imagogallery" class="imagogallery" >
    this.loader = new FlickrLoader();
</div>
SmugmugLoader

Loads a smugmug album and takes the following Parameters

  1. the album id
  2. show captions (set to 1 if captions of images should be shown)

Example: 

<div id="imagogallery" class="imagogallery" >
    this.loader = new new SmugmugLoader(3844135, 1);
</div>