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">

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

	var pages = $("#menu li");
	var loading = $("#loading");
	var content = $("#results");
	//show loading bar
	function showLoading(){
	//hide loading bar
	function hideLoading(){
		.fadeTo(1000, 0)

	//Manage click events
		//show the loading bar
		//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);
	//default - 1st page
	$("#1").css({'background-color' : '#da6515'});
	var targetUrl = "/content.php?page=1&cat=<?=$_GET['cat']?>" + " #results";
	content.load(targetUrl, hideLoading);

Open in new window

Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

Steve KrileConnect With a Mentor Commented:
The way plugins like this work is to wire up a set of behaviors to items in your DOM at the time the page is ready.  This behavior is stored in memory and whenever you click on a link with this wired behavior, the desired effect occurs.

Now, on to your situation.  The page loads and the wiring takes place ( $('.lightbox').colorbox();)...in other words, find all things with the class "lightbox" and do all my "colorbox" wiring.

When you refresh the contents of part of your page you don't get that wiring for free.  There are a few options that will depend upon the source of your ajax info.  

If you are hitting a database and collecting more things and bringing them back in an Ajax call, then you are likely going to need to create a function that activates the "colorbox" features, and add that to the object as it is loaded.

If you are loading content from another page using $.load(), then any document.ready() calls on that target page will be evaluated as the content is pulled on to your new page, and the wiring could occur at that point.

However...all that being said, I'm not familiar with colobox.  Just looked at it and it's pretty, but I didn't see one key thing I was looking for:  API.

Using something like flowplayer's (http://flowplayer.org/tools/demos/overlay/index.html) overlay is nice because you can write a generic function to receive a click event and then call the overlay() function with the last bit being:  .load()     This will execute the desired behavior on the fly.  

All Courses

From novice to tech pro — start learning today.