Jquery Colorbox

I'm developing a site that uses a colorbox to view a larger version of the product.

http://www.bohemia.arrivaldesign.co.uk/boutique/dresses/dilema_dress

My dilemma is that I need the images to scroll through when you're in the colorbox using the next/previous arrows, this is working fine for the initial load of the page, if you click the magnifying glass, but once you click on the numbered boxes, I can get the colorbox to load at the correct point, with the same image and in the correct order, but I can't seem to get the next/previous arrows to work?

Any ideas?

Thanks,

Chris

<script type="text/javascript"> 
	$(document).ready(function(){ 
			$('a[rel=zoomer]').colorbox(); 
			$('.display_slides').click(function(){ 
				if ($(this).attr("id") == "no1") {
					$("a[rel='zoomer']:eq(0)").click(); 
				}
				else if ($(this).attr("id") == "no2") {
					$("a[rel='zoomer']:eq(1)").click(); 
				}
				else if ($(this).attr("id") == "no3") {
					$("a[rel='zoomer']:eq(2)").click(); 
				}
				else if ($(this).attr("id") == "no4") {
					$("a[rel='zoomer']:eq(3)").click(); 
				}
				return false; 
			}) 
			$("#prod_img li a").click(function(event){
				$("#prod_img li a").removeClass("onstate");
				var newNo = $(this).attr("rel");
				$(".display_slides").attr("id", newNo);
				$(this).addClass("onstate");
				$("img#mainpic").hide();
				var newSRC = $(this).attr("href");
				$("img#mainpic").attr("src", "/garments/page_" + newSRC).fadeIn();
				var newZoom = $(this).attr("href");
				$("a[rel='zoomer']").attr("href", "/garments/" + newZoom);
				event.preventDefault();
			});
	}); 
</script> 
 
<div class="hide"> 
                <a href="/garments/b4864.jpg" rel="zoomer" id="zoom1" title="Dilema Dress">1</a>
                                <a href="/garments/asd63.jpg" rel="zoomer" id="zoom2" title="Dilema Dress">2</a>
                                <a href="/garments/6pu65.jpg" rel="zoomer" id="zoom3" title="Dilema Dress">3</a>
                                <a href="/garments/ftbclose up.jpg" rel="zoomer" id="zoom4" title="Dilema Dress">4</a>
                                </div> 
 
    <div id="prod_img">
      <div class="pg_image"><img src="/garments/page_b4864.jpg" name="mainpic" width="238" height="306" id="mainpic" /><a href="/garments/b4864.jpg" title="Dilema Dress" class="display_slides" id="no1"><img src="/images/zoom.gif" alt="Enlarge" width="21" height="21" class="zoom" /></a></div>
      <ul>
        <li><a href="b4864.jpg" class="onstate" rel="no1">1</a></li>
                <li><a href="asd63.jpg" rel="no2">2</a></li>
                <li><a href="6pu65.jpg" rel="no3">3</a></li>
                <li><a href="ftbclose up.jpg" rel="no4">4</a></li>
              </ul>
    </div>

Select allOpen in new window