Imago is an Ajax Image Gallery with focus on simplicity and ease of use. It’s plain JavaScript and build on the mature ajax library mootools. No server side scripting is required! Neither is flash. Whether your photos are on flickr, smugmug or you’d like to host them yourself, Imago can show them.

How to use?

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:

* Picasa Web Template; download Imago Picasa Exporter. Install like any other web template for picasa. The template is under BSD License.
* Directory2ImagoGallery Script generates only the gallery, but no xhtml file
* Imago skin for JAlbum

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.

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>
      <script src="scripts/imago.js" type="text/javascript" ></script>
      <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>

Demo: http://codeboje.de/imago/samplegallery/
Download: http://codeboje.de/downloads/ImagoPicasaExporter11.zip
Source: http://imago.codeboje.de/

Related Listings:

1. Ajax Photo Gallery The AJAX version of AgileGallery is a free AJAX photo...
2. AJAX image gallery Script Pyxy-gallery is an AJAX image gallery in PHP and JavaScript,...
3. Dynamic Image Gallery with Slideshow This extremely lightweight JavaScript image gallery and slideshow script clocks...
4. Image Gallery using Spry These versions use various coding techniques like, from inline Spry...
5. Modified Hoverbox Image Gallery This following is a modified version of Nathan’s incredible Hoverbox...

Do you like this post?

Email: