Fancybox not showing streamed image correctly

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.

开发者_Python百科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?

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.

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+)

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.

Can we see your server-side code that publishes the content? It appears the content-type is not set properly or was set before the point where you output your data. You may want to try a Response.Clear() before outputting your new content-type. ( Your browser may be assuming the content type when opening it directly )