How can I dynamically load the jQuery Colorbox plugin?

When I try to load it runtime I keep getting the error:

Erro: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)" Erro: b.data(this, r) is undefined jquery.colorbox-min.js

This is how I need to load it:

<a class="cboxElement" href="urlimg1.jpg" rel="example11111" title="title 1.">img1</a>
<a class="cboxElement" href="urlimg1.jpg" rel="example11111" title="title 1.">img1</a>
<a class="cboxElement" href="urlimg1.jpg" rel="example11111" title="title 1.">img1</a>

<input type="button" onclick="loadColorBox()" value="load it!"/>
<script>
function loadColorBox(){
  $("a[rel='example11111']").colorbox();
}
</script>

Can anybody help? Yours, Diogo

edit---- Ok, that is the only way that works for me:

<div class="galeria_imgs">
<a class="cboxElemento" title="Me and my grandfather on the Ohoopee." href="url1" rel="galeria_img_1">link1</a> 
<a class="cboxElemento" title="On the Ohoopee as a child" href="url2" rel="galeria_img_1">link2</a> 
<a class="cboxElemento" title="On the Ohoopee as an adult" href="url3" rel="galeria_img_1">link3</a>
</div>

<script type="text/javascript">// <![CDATA[
$(".cboxElemento").live("click", function(){
    $("<a href="+$(this).attr("href")+" rel="+$(this).attr("rel")+" />").colorbox({
        open:true,
        rel:'galeria_img_1',
        title:$(this).attr('title')
    });

    return false;
}); 
// ]]></script>

At least it loads properly the image fro开发者_C百科m href link but for some reason it’s not recognizing that it’s a gallery, I tried to force rel:'galeria_img_1' but still not working... any idea?

I wasn't able to reproduce your error message. As far as I could see your code looks good, you just need to add the open:true option to your colorbox settings. This option tells colorbox to open right now (when the function is called), rather than open when those links are clicked. So your function should look like this:

function loadColorBox(){
    $("a[rel='example11111']").colorbox({
        open: true
    });
}

Using OnClick to load ColorBox isn't strictly necessary. The plugin has click event handling built-in and when you use it in the 'vanilla' cuse case - which you are - it assumes you what the plugin to do the even trapping.

If your use case is this: Trigger ColorBox open from an arbitrary element (button in your case) and display content from an arbitrary collection (rel="example11111" in your case) could it approach this way:

var $gallery = $('a[rel=example11111]').colorbox();   // Set the target gallery

$('button').click(function(e){   // Invoke Colorbox @ content element #1 on click of button
     e.preventDefault();   // stop default action by browser
     $gallery.eq(0).click();   // do a click event on the gallery to open Cbox
});

This separates the assignment of the gallery content from the event that invokes ColorBox. You could also assign an ID or class to the button element for more granular selection.