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);
});

Open in new window

djfenomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve KrileCommented:
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.  

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.