Use a public image preview in JQuery.Colorbox

Here is the link i use with JQuery.Colorbox:

<a class="group1" href="' + previewurl + '" >hey yo</a>

and here is the call to colorbox :

$('.group1').colorbox({rel: 'group1', height: '90%'});

I can use a preview i get from standard preview url :

in JQuery.Colorbox but i can’t use one i get from public preview url like :

With that url, colorbox displays the image content as text.

The weird thing is that if i open those two urls in my browser to compare their content, there is no difference. Both links generate a page with an <img> in the <body> and the headers are identical.

I guess the different behaviour of colorbox comes from the fact the working url ends with .png and the other one by .php.

Any idea about how i could make colorbox understand the public image preview url is an image ?

Little lesson of humility. I found the answer in the colorbox doc.

There is a colorbox option to force colorbox to display a link as a photo.

Use this when automatic photo detection fails (such as using a url like ‘photo.php’ instead of ‘photo.jpg’)

It is as simple as that :

$('.group1').colorbox({rel: 'group1', height: '90%', photo: true});