Open colorbox when click on an image within openlayer ballon (popup)

Question

I can open colorbox when click on an image from within openlayer balloon (popup). The problem is that it work only one time. After I reload the page it work again but only one time.

When I look at chrome console I get this error:

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

The code into an external .js file is:

function call_colorbox(url) {
jQuery.colorbox({href: url, height: "80%", width: "80%"});
};

the code within the openlayer baloon (popup) is:

<a href="#" onClick="call_colorbox('/mypage.html')"><img src="myimg.jpg" alt="title"  title="title" /></a>

Can somebody give me an hint how to correct the problem ?

Thanks in advance

Answer 1

Try to avoid inline script handlers. Choose an identifier which you can target in your javascript, for example .colorbox :

<a href="#" class="colorbox" data-url="example.html"> .. </a>

Then in your JS (assuming you load the jQuery library):

$('body').on('click', '.colorbox', function (event) {
  $.colorbox({href: $(this).data('url'), height: "80%", width: "80%"});
  event.preventDefault();
});