How to have multiple jQuery color columns on the same page

Question

I have a page that should open a colorbox from several places. One of them is in the document ready function as follows:

$("a[rel='q1']").colorbox({opacity:0.8, width:"800px", height:"75%"}); 

Another should open a completely unrelated colorbox from the google chart and do it like this in the onclick function:

 $.colorbox({maxHeight:"100%", href:'<c:url value="/path/mypage.html" />'}); 

If I press the second, it will open. then click on the first one and it will open. Then click the second one and I get the following javascript error:

 Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'colorbox' 

As soon as I click the link in the first configuration, it breaks the second until the page is refreshed.

colorbox 1.3.18 jquery 1.6.4

How can I make them work?

Answer 1

It looks like your second link contains a jQuery link, and it overwrites the original jQuery version that you load into your document and extend it using the colorbox plugin. I assume the second link is a complete HTML document that should render as an iframe, not ajax.