Fancybox not showing streamed image correctly

Question

I've got an aspx page that streams jpeg's. It sets the content type and then writes to the response stream. If I view the images directly they work a treat, but if I use fancybox 1.2.6 I get the following.

Using fancybox 1.2.1 the images do show.

Here is the code that is pushing out the image.

using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
        {
            using (Stream responseStream = response.GetResponseStream())
            {
                using (Image outImg = Image.FromStream(responseStream))
                {
                    Response.Clear();
                    Response.ContentType = "image/jpeg";
                    outImg.Save(Response.OutputStream, ImageFormat.Jpeg);
                }
            }
        }

Any help?

Answer 1

Our images also didn't have extensions and were just emitted from an ashx handler.

We ended up adding 'type':'image' to the fancybox declaration like:

$('.fb1').fancybox({'titlePosition':'inside','type':'image'})

Which worked perfectly.

Answer 2

See point 6 in the Fancybox FAQ:

FancyBox gueses content type from url but sometimes it can be wrong. The solution is to force your type, like so - $(".selector").fancybox({'type' : 'image'});

(required version 1.3+)

Answer 3

There is a regular expression inside the fancybox script file that needed to be amended in order for it to allow that file extension to be treated correctly.

imageRegExp = /\.(aspx|jpg|gif|png|bmp|jpeg)(.*)?$/i;

I've just added aspx for now, but will need to do some additional work in order to make it function correctly.