digitaljoel
digitaljoel

Reputation: 26584

How to have multiple jQuery colorboxes in the same page

I have a page that needs to open a colorbox from multiple locations. One is in the document ready function as follows:

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

The other needs to open a totally unrelated colorbox from a google chart and does so like this in an onclick function:

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

If I click the second one it opens. then click the first and it opens. Then click the second 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 get both of them to work?

Upvotes: 4

Views: 4489

Answers (1)

Jack
Jack

Reputation: 9548

Sounds like your 2nd link contains a link to jQuery, and it is overwriting the original version of jQuery that you load into your document and extend with the colorbox plugin. My guess is that the 2nd link is a complete HTML document, which should be displayed as an iframe rather than ajax.

Upvotes: 2

Related Questions