Image Gallery design using PHP and Javascript

I'm currently trying to redesign an image gallery I have with the following theme:

http://www.madonion.co.uk/example_gallery.php

Basically what I need is when the page loads, the primary image is loaded into the big space and into the smaller middle space below it. What I also want is for the previous image (this will be the last image if the primary image is selected) to show in the small left box and the next image to show in the box to the right. As the next/previous image is selected, the thumbnail images need to change accordingly. In addition each image in the database has a "title" assigned to it which will show below the Previous and Next Image text currently showing, but again needs to change accordingly as other images are selected.

However there are two sets of images, full and thumbnail size, that are located in the following example path:

/data/<product_id>/images/full<image_id>.jpg
/data/<product_id>/images/tmb<image_id>.jpg

Thankfully the 'image_id' is the same for both images. For example:

/data/100/images/full550.jpg
/data/100/images/tmb550.jpg

I've looked at various solutions but none of which come close to what I need. So I have figured the best way is to do it manually. I would really appreciate it if anyone can point me in the right direction and help me design this. If you have any code snippets in PHP, MySQL and/or Javascript format, I can upload them into the example gallery URL posted above to test.

Many thanks.