Question

I have only used the $.colorbox() function to display content successfully.

If I have a div with id of “test”, and I call

$('#test').colorbox()

what is the expected behavior?

I expect that it will display the “test” div inside of a colorbox, but I have never seen that happen. Otherwise, what is the purpose of calling colorbox() on specific DOM elements?

I see that this form of colorbox() is referred to as “Ajax”. Does the $(mySelector).colorbox() usage assume that mySelector is a link and use that link’s href to perform an Ajax call and then insert the return content into the colorbox? If so, that is not clear to me from the documentation.

I’m using:

• jQuery 1.6.4
• colorbox 1.3.19

Answer 1

If you refer to the sample page: http://www.jacklmoore.com/colorbox/example1/

…or check out the documentation: http://www.jacklmoore.com/colorbox

… you can see that the selector is intended to represent the item to be clicked. The behavior of the plugin depends on what the selector is.

Calling colorbox() without any arguments on a random div will yield an empty colorbox when you click said div: http://jsfiddle.net/w6AqG/

That is the expected behavior, presumably. Because this is a jQuery plugin written by a third party, the only way to know what the expectations are is to read the documentation (again, that’s http://www.jacklmoore.com/colorbox), OR, send the plugin author an email and ask him.

I suggest you follow the samples.

The minimum working example using inline elements:

HTML

<a id="show_test" href="#test">Show the test div</a>
<div style="display:none;">
    <div id="test">This is a test</div>
</div>

Javascript

$('#show_test').colorbox({inline:true});

Try it: http://jsfiddle.net/K8eSc/