Search code examples
google-chromefancyboxmime-typesfilepicker.io

Resource interpreted as Document but transferred with MIME type image/jpeg

I'm using Filepicker.io to handle my image uploads on my website.

I'm also using FancyBox to display a nice slider. Everything works fine if I use a regular image like: http://i.imgur.com/asdf.jpeg as the <img src="">. Meaning I click the images and the slider pops up correctly.

However when I switch out those static image url's and use my Filepicker addresses, when I click on the images to open the fancybox, the image is downloaded.

Here's the message I get in the console, on Google Chrome:

Resource interpreted as Document but transferred with MIME type image/jpeg: "https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false".

Any suggestions?

Solution

  • Since your link:

    https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false

    doesn't have an image extension (jpg, png, gif), fancybox doesn't know what type of content needs to be handled. You need to tell it by adding the API option "type": "image" like:

    $(".fancybox").fancybox({
   "type": "image"
});

    That is documented here http://fancybox.net/faq, No. 6 (if using v1.3.4), or here http://fancyapps.com/fancybox/#support, FAQ tab, No. 5 (if using v2.x).

    For more options how to handle the issue see here: https://stackoverflow.com/a/17554660/1055987