Fancybox zeigt das gestreamte Bild nicht richtig an

Question

Ich habe eine aspx-Seite, die JPEGs streamt. Er legt den Inhaltstyp fest und schreibt dann in den Antwortstream. Wenn ich die Bilder direkt betrachte, funktionieren sie gut, aber wenn ich fancybox 1.2.6 benutze, bekomme ich folgendes. alt text http://img686.imageshack.us/img686/3348/fancybox.png

Mit fancybox 1.2.1 werden die Bilder angezeigt.

Hier ist der Code, der das Bild ausschiebt.

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); 
       } 
      } 
     } 

Irgendwelche Hilfe?

Answer 1

In der fancybox-Skriptdatei gibt es einen regulären Ausdruck, der geändert werden muss, damit die Dateierweiterung korrekt behandelt werden kann.

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

Ich habe gerade aspx für jetzt hinzugefügt, aber muss einige zusätzliche Arbeit tun, um es richtig funktionieren zu lassen.

Answer 2

Können wir Ihren serverseitigen Code sehen, der den Inhalt veröffentlicht? Es scheint, dass der Inhaltstyp nicht ordnungsgemäß festgelegt wurde oder vor dem Punkt festgelegt wurde, an dem Sie Ihre Daten ausgegeben haben. Möglicherweise möchten Sie ein Response.Clear() versuchen, bevor Sie Ihren neuen Inhaltstyp ausgeben. (Ihr Browser kann den Inhaltstyp beim direkten Öffnen annehmen.)

Answer 3

Unsere Bilder hatten auch keine Erweiterungen und wurden nur von einem Aschx-Handler ausgegeben.

Am Ende haben wir das Hinzufügen 'Typ': 'Bild' auf die fancybox Erklärung wie:

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

, die perfekt gearbeitet.

Answer 4

Siehe Punkt 6 in den Fancybox FAQ:

FancyBox gueses Inhaltstyp von url aber manchmal kann es falsch sein. Die Lösung ist, Ihren Typ zu erzwingen, so - $ (". Selector"). Fancybox ({'type': 'image'});

(erforderliche Version 1.3+)