Hello,

I am working on a project and I am attempting to implement some basic jquery/ajax functionality.

This is the code that I currently have but my problem is that the fancybox loads before the ajax request is complete and does not display correctly. Is there a way to detect when the $('#ajax-content').load(url); event is complete and then launch the fancybox? I have been looking through the documentation and searching but I can't find anything.

Any suggestions?

Code:
$(document).ready(function() {
	$('.grid-wrapper a').click(function(e) {
		var url=$(this).attr('href');
		url = url + ' div.distributor-info';
		$('#ajax-content').load(url);
		e.preventDefault();
		$.fancybox ({
			'titlePosition'		: 'inside',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'href' : '#ajax-content'
		})
	});
});