Javascript Fun - Picture Album

I apologize for the length of time since my last post. Life gets in the way at times.

Anyway, I recently have had the occasion to do a side project for a friend. She was looking for a way to display pictures of various events on the web. Being the dutiful proponent of not programming something if someone has already done it, I set out to see what was available. I was actually disappointed to see that almost everyone uses the same code (http://www.kitykity.com/photoalbum/). I don't have anything against this implementation, but what we needed required a different set of parameters:

• Multiple images displayed at a time (I chose 4, but it could be easily customized)
• Multiple albums
• Single page to access all albums, but not necessarily show all albums

My friend has a limitation at the location her site is hosted at in that she is paying by the page. This is what pushed the final requirement for accessing mulitple albums.

So, how did I solve this challenge? First, I created a function to parse the URL and grab the parameters passed.

function queryString(key){
var page = new PageQuery(window.location.search);
return unescape(page.getValue(key));
}

function PageQuery(q) {
if(q.length > 1) this.q = q.substring(1, q.length);
else this.q = null;

this.keyValuePairs = new Array();

if(q) {
for(var i=0; i < getkeyvaluepairs =" function()" getvalue =" function(s)" j="0;" getparameters =" function()" a =" new" j="0;" getlength =" function()">

These two functions are used to pull the querystring parameter to see which album I am wishing to view.

Additionally, to manage the photos I create arrays with the names of the image files and the captions I will show for them.

function photo_obj(pic,caption)
{
this.pic=pic;
this.caption=caption;
}

albumGrace= new Array();
albumGrace[0]= new photo_obj(imgpath + 'carrots.jpg','Carrots are health and good for your eyes.');
albumGrace[1]= new photo_obj(imgpath + 'bannana.jpg','Bannana');
albumGrace[2]= new photo_obj(imgpath + 'cherry.jpg','Cherry');
albumGrace[3]= new photo_obj(imgpath + 'cucumber.jpg','Cucumber');
albumGrace[4]= new photo_obj(imgpath + 'garlic.jpg','Garlic');
albumGrace[5]= new photo_obj(imgpath + 'lemon.jpg','Lemon');
albumGrace[6]= new photo_obj(imgpath + 'melon.jpg','Melon');
albumGrace[7]= new photo_obj(imgpath + 'onion.jpg','Onion');
albumGrace[8]= new photo_obj(imgpath + 'pepper.jpg','Pepper');
albumGrace[9]= new photo_obj(imgpath + 'strawberry.jpg','Strawberry');
albumGrace[10]= new photo_obj(imgpath + 'tomato.jpg','Tomato');

The page would have one array per album and then in the BODY onLoad tag a function is called that pulls the querystring values and checks to see which array is to be used.

switch(queryString(key))
{
//Default and false (querystring error) loads the first listed album
default:
case "false":
case "grace":
// Each album just has to load these values
pic_obj = albumGrace; //name of array from above
document.getElementById('pageTitle').innerHTML = "Photo Album - Grace"; // Title on page
break;
case "youth":
pic_obj = albumYouth; // name of array from above
document.getElementById('pageTitle').innerHTML = "Photo Album - Youth"; // Title on page
break;
}

So anyway, I have not fully customized it, but my goal was to create something that could easily have a nice design wrapped around it and be futher modified for any given purpose. Demo links: Grace Album, Youth Album (I used the same graphics but removed some from the array and modified the captions). Some of the features:

• Next and previous button show or hide dynamically
• No Image graphic is shown if a complete set of four is not available
• Code is commented with help for "non-techies" to use it
• Plain and easily designed around
• Standard HTML with no suprises

Use your browsers view source ability to grab the code. Once I "package" it I will post a link here.