Fancybox no muestra la imagen transmitida correctamente

Question

Tengo una página aspx que transmite archivos jpeg. Establece el tipo de contenido y luego escribe en la secuencia de respuesta. Si veo las imágenes directamente, funcionan de maravilla, pero si utilizo fancybox 1.2.6 obtendré lo siguiente. alt text http://img686.imageshack.us/img686/3348/fancybox.png

Utilizando fancybox 1.2.1 no se muestran las imágenes.

Aquí está el código que está desplazando la imagen.

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

¿Algún ayuda?

Answer 1

Hay una expresión regular dentro del archivo de script de fancybox que debe modificarse para permitir que la extensión de archivo se trate correctamente.

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

que acaba de añadir aspx por ahora, pero tendrá que hacer algún trabajo adicional con el fin de que funcione correctamente.

Answer 2

¿Podemos ver el código del servidor que publica el contenido? Parece que el tipo de contenido no está configurado correctamente o se configuró antes del punto en el que se generan los datos. Es posible que desee probar Response.Clear() antes de enviar su nuevo tipo de contenido. (Su navegador puede estar asumiendo el tipo de contenido al abrirlo directamente)

Answer 3

Nuestras imágenes tampoco tenían extensiones y solo se emitían desde un controlador de ashx.

Terminamos añadiendo 'tipo': 'imagen' a la declaración FancyBox como:

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

que funcionaba perfectamente.

Answer 4

Véase el punto 6 de la Fancybox FAQ:

FancyBox Gueses tipo de contenido de URL pero a veces puede estar equivocado. La solución es forzar su tipo, como tan - $ (". Selector"). Fancybox ({'type': 'image'});

(versión necesaria 1.3+)