Javascript image gallery

Question

I am looking for a javascript function that works based around an array of dynamically generated images. At the moment I have a preview window.

When this is clicked I would like it to hide the preview window and load the first image in the array. I would the like to be able to navigate through the remaining images in the array.

If someone could point me in the right direction or if you know how to put this together it would be much appreciated. Thanks.

Answer 1

You could dynamicly create an image element and keep on using that, something like this? (this is using jQuery).

<button id='nextImage'>Load nect image</button>
<div id='imageContainer'><div id='previewWindow'>Preview</div></div>


//Javascript frome here (JQuery)
var images = Array();
images.push('url/to/image.jpg');
window.lastImage=-1;
$('#previewWindow').click( function() { ('#nextImage').click(); });
$('#nextImage').click( function() {
 window.lastImage += 1;
 if(typeof(images[window.lastImage]) == 'undefined') { return; } //if endof array
 $('#previewWindow').remove(); //better is to only do this once
 $('#image').remove(); //Only creating an image once is even better
 $('<img />')
  .attr('id', 'image')
  .attr('src', images[window.lastImage])
  .appendTo('#imageContainer');
});

EDIT
Just read you would like to able to click the preview window, added that.