Hello all,

I have tried to find the answer to my question in books and the web but have not had much luck.

I am trying to create a jQuery image gallery that loads an image into a predefined div. This I can do.

My problem: The navigation for the images consists or an unordered list, 1 through 'n' where n is the last image. I would also like to add the option of clicking on a forward or backward buttons that would be located next to the list. I should also add that the link associated with the image has an "active" class added to it when it is being displayed.

As an example the navigation would look like this...

1 2 3 4 5 6 7 < >

< and > would be the forward and back buttons.

How can I have these forward and back buttons load the next or previous images into to the div and change the class of the link associated with the image? The buttons should also only progress forward or back if there is another image to load, in other words, if the last image has been loaded clicking on the forward button will do nothing.

Another questions: how can I display a loading gif if the image is large and takes time to load?


Any help would be greatly appreciated whether it be code or a link to an online resource that gets me closer to an answer.


Thanks.