Colorbox is a lightweight customizable lightbox plugin for jQuery.

I am using colorbox for another perpose: to show a (semi!) modal window to show information on ajax call.

You can get the plugin here .

Here I’ll give a simple example how to load ajax data and show through colorbox plugin. In second phase i’ll try to give the scenario of the complex situation and give the solution. Though the solution looks so obvious now, i had to go through lots of other solutions (Not worthy for that situation).

In line:10 we included the plugin.

In line:8 we included the css file

In line:14 we implemented colorbox on all element having class ajax (Eg. line:20); The implementation is done while document is ready.

To call the ajax we have to follow line:20; (See href=”….”)

Now this should do your work. Now complexity arises when we are trying to implement colorbox on a link that has class “ajax” but loaded on another ajax call triggered by user.

Say like we loaded some html by following call to a div having class body:

$(‘div[class=\’body\’]’).load(‘index.php?route=dashboard/pachistory/getPackHistory’);

And the html returned and loaded in the div is as following for example:

<\a class=”ajax” href=”index.php?route=x/f/a”> New Link </a>

Now what is the expected behavior to us now? Definitely we’d expect when user’ll click on New Link they should see a modal window having the html got through the ajax call.
But that is not going to happen. Why? Lets see what happens when we are executing line:14 of the earlier example.

It makes some changes of element having class name ajax, for example it changes the class to “ajax cboxElement”.

So when we are executing line:14 (on load of document) the New Link is not yet in the document so the changes are not effecting this part of document. This is why we not getting our expected behavior.

To rid of the problem we’ll use callback function (a function(1) passed as a parameter to a function(0) to be executed when the execution of function(0) is completed <a href=”http://www.codeguru.com/cpp/cpp/cpp_mfc/callbacks/article.php/c10557/Callback-Functions-Tutorial.htm“>read more</a>

So what we are doing is simply like :
$(‘div[class=\’pacHistoryContainer\’]’).load(‘index.php?route=dashboard/pachistory/getPackHistory’, function(){
$(“.ajax”).colorbox();
});