Ajax paging and Jquery colorbox

I have a gallery page on my site, it basically has 15 images shown on the page and then paging at the bottom to get to page 2,3, etc of the gallery. This is done using AJAX.

When an image in the gallery is clicked, then a lightbox should appear with a larger version of the image. I'm using colorbox to achieve this, but I can't get it working within the AJAX page.

The colorbox is usually called with the following code:

<script type="text/javascript">
$(document).ready(function(){
      $('.lightbox').colorbox();
});
</script>

I realise this is being called on the main page, but how do I get it so that the AJAX calls it and opens the colorbox? The colorbox script is definitely working, you can test this by clicking "test" on the main heading.

I've attached the paging js code below, I've tried to add the call to the lightbox in this but to no avail.

the site is http://www.flames.arrivaldesign.co.uk/fires/gas

Many thanks

Chris

$(document).ready(function(){
	//References
	var pages = $("#menu li");
	var loading = $("#loading");
	var content = $("#results");
	
	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"0.6"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading
		.fadeTo(1000, 0)
		.css({display:"none"})
		;
	};
	

	//Manage click events
	pages.click(function(){
		//show the loading bar
		showLoading();
		
		//Highlight current page number
		pages.css({'background-color' : ''});
		$(this).css({'background-color' : '#da6515'});

		//Load content
		var pageNum = this.id;
		var targetUrl = "/content.php?page=" + pageNum + "&cat=<?=$_GET['cat']?>" + " #results";
		content.load(targetUrl, hideLoading);
        $('.lightbox').colorbox();
	});
	
	//default - 1st page
	$("#1").css({'background-color' : '#da6515'});
	var targetUrl = "/content.php?page=1&cat=<?=$_GET['cat']?>" + " #results";
	showLoading();
	content.load(targetUrl, hideLoading);
});

Select allOpen in new window