Image Gallery with Ajax

Last Update: 07.01.2007. By azarai in Javascript | imago

UPDATE:
a new version is available Imago Release 03

The redesign for my gf’s shop zipzack.de (the german one) is done and you can now order prints of some pictures. So i looked for a nice gallery script out there, found enough, but was not quite satiesfied with them. Most of em use php or other server side code and i think for our small gallery we dont need that at all. By the way most of em were to bloated too. By accident i found SimpleViewer, a great simple gallery in flash. The little download link wasnt bothering me, so i tried it. But sadly i couldnt move the title, neither add a shopping link (which needs to be javascript, cuz the bildpartner.de api requieres it).... I know i could by the source and i really thought about that, but it wont solve my problem, i have no flash at all. So the idea of my own solution was born.

I wanted to use the gallery.xml of SimpleViewer for my gallery (didnt feel like inventing my own schema), but no server side scripting, nor generating, so i used, buzzword alert, Ajax :-) I had a look at some popular libraries and finally picked mootools. Seemed to be the easiest and smallest solution for my requirements.

For creation of the gallery.xml and the thumb images i use the picasa template offered by SimpleViewer and just leave out the flash stuff. Some stuff is still hardcoded, but if someone is interested i am going to clean up the source and release it. For now an overview how it works and some code snippets. See it live at nature.zipzack.de and dont be afraid of the german text :-)

The Overview

Inlude the gallery in an xhtml page:

this.albumName must contain the name of the album. Its used to receive the gallery.xml from the server.

When the site loads, the gallery loads too and picks up the gallery.xml and looks which images to display.


new ajax(gallery.baseURL + “/” + gallery.albumName + ‘/gallery.xml’,{method: ‘get’, onComplete: parseGalleryXMLResponse}).request();

Use of mootools ajax class and retreiving out gallery.xml and call parseGalleryXMLResponse on finished.
Next we create our gallery objects out of the received xml..

var images = responseXML.getElementsByTagName(‘image’);
for (var i=0;i<images.length;i++) {
gallery.addImage(new GalleryImage(getNodeValue(images[i], ‘filename’), getNodeValue(images[i], ‘caption’)));
}


After some try and error i got it working, but i find those things damn hard to debug.....


var images = responseXML.getElementsByTagName(‘image’);
for (var i=0;i<images.length;i++) {
gallery.addImage(new GalleryImage(getNodeValue(images[i], ‘filename’), getNodeValue(images[i], ‘caption’)));
}


Then we build the div area of our gallery elements, mainly a thumbMenu, the mainframe and some divs for title, shopping cart and so on. The Script inserts the thumbimages and picks a first picture for the presentaion frame (incl title, shopping cart link).
Transition between two images in the frame is done via Fx.Style from mootools.


var myFx = new Fx.Style(‘currentImg’, ‘opacity’, {duration:500, onComplete: function() {
$(‘currentImg’).setProperty(‘src’, gallery.getImageBaseURL() + fileName);
$(‘currentImg’).setProperty(‘alt’, title);
$(‘currentImg’).setProperty(‘title’, title);
$(‘add2cart’).setProperty(‘href’, ‘javascript:picturetransfer(“’ + “/” + gallery.albumName + ‘/’ + fileName + ‘“);’);
Element.setInnerHTML(‘currentImageTitle’,title);
Element.hide(‘loading’);
var myFx = new Fx.Style(‘currentImg’, ‘opacity’, {duration:1000}).custom(0.5,1);
}}).custom(1,0.5);

Fades the opacity of the current image from 1 to 0.5, replaces it with the new one and fades back to a fully visible image. Its not really smooth yet, guess i have to fine tune the parameters a bit.

That was it for now, just leave a comment if you need some more infos. By the way, after i got that working i played a bit with OpenLaszlo and their way of SOLO apps. For those who dont know Laszlo, it generates flash apps from a gui description/behavior file (xml + javascript). You can run those apps later as SOLO or with their presentationserver. More next time.