unable to call colorbox correctly using jQuery

Question

So I have a code in which I was trying to add colorbox plugin. I downloaded and included jquery and the colorbox css and javascript.

Now what I wanted was that on the click of an image, I wanted to show another image in the colorbox popup, however I wanted to do that using jQuery as shown in colorbox documentation. So I did:

$('.img-class').click(function(){
    $.colorbox({
        html:"<div><img src='"+imgUrl+"'></div>",
        close: "close"
    });
});

I get the imgUrl from a different DOM element. I alerted it and its value is correct. However the colorbox is rendered completely broken. That is, the image is not shown, some weird broken border image is shown, that too only on two sides of the lightbox. The other two sides are open...its a mess.

What might I be doing wrong?

Answer 1

What div are you closing in there or did you forget to open it?

html:"<img src='"+imgUrl+"'></div>",

to

html:"<div><img src='"+imgUrl+"'></div>",

Maybe...

If not do you get any error from Javascript/ jQuery in console. Is your HTML good, did you tried the plugin in a blank page...