Ajax Image Gallery - Imago - first public version

Last Update: 02.02.2007. By azarai in Javascript | imago

Update: This version is outdated. For latest news and releases check imago product page.

Thought i did forget it, didnt you? Ok it took some time, but no way i am forgetting this. As promised in Image Gallery with Ajax i cleaned up the code and release now the first public version of Imago. A live version can be found at nature.zipzack.de. For our non german speaking readers, just click eg on the “Madeira” link :-)

Features:
- parses parts of simple viewers gallery.xml, so you can use both
- suited for small galleries
- integration with bildpartner.de image ordering API; you need an account and their pictureordering javascript, due legal stuff i cant distribute it with my app, for further instructions see below.
- damn simple
- uses mootools for ajax scripting

Whats lacking?
- no real thumb menu yet. Just the 2 columns and all the picturethumbs in them and visible
- not tested with different image and browser sizes, neither portrait pics are tested yet.
- no back and forward navigation
- support for other simple viewer gallery.xml attributes, eg maxImageWidth, border, padding

Where to get?
Version 0.1 is not available anymore. Go and download v0.2. For further infos see
download Info Imago v0.2

How to install?
Take a look at the test index.html page how to integrate. Its simple.

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

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

   <div id="imagogallery" class="imagogallery" >
       this.albumName = "Madeira";
       this.orderInfo = 'Some info for ordering.';
       this.showShoppingCart = 'no';
   </div>
   

albumName: name of the album, needs to be a directory relative to your html file with the right image folder structure. Best you use some of the gallery generation tools from simple viewer
orderInfo: a small text below the shopping cart
showShoppingCart: yes = show cart, no= no cart

1. Optional: You got an account by bildpartner.de and the javascript picturetransfer.js?
   You only need to add the line to the (x)html header

   <script src="scripts/picturetransfer.js" type="text/javascript" />
   

   and turn the shopping cart on (this.showShoppingCart = ‘yes’;) . The script uses /albumName/imageFileName as the parameter, so be sure you use this directory structure.

Bugreports & Suggestions:
As always, just drop a comment or write a mail.