Display an ashx image using jQuery? - asp.net

Question

I've been trying to use the jQuery plugin Colorbox to display images I have in my DB through an ashx file. Unfortunately it just spits a bunch of gibberish at the top of the page and no image. Can this be done? Here is what I have so far:
$(document).ready
(
function ()
{
$("a[rel='cbImg']").colorbox();
}
);
...
<a rel="cbImg" href="HuntImage.ashx?id=15">Click to see image</a>
UPDATE:
My ashx file is writing the binary out:
context.Response.ContentType = "image/bmp";
context.Response.BinaryWrite(ba);

Answer 1

Colorbox has an option 'photo'. If you set this to true in your constructor then it will force it to render the photo.
$(target).colorbox({photo: true});

Answer 2

You should be setting the src attribute in the client side.
<img src="HuntImage.ashx?id=15" ..../>
The handler
public class ImageRequestHandler: IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
if(context.Request.QueryString.Count != 0)
{
//Get the stored image and write in the response.
var storedImage = context.Session[_Default.STORED_IMAGE] as byte[];
if (storedImage != null)
{
Image image = GetImage(storedImage);
if (image != null)
{
context.Response.ContentType = "image/jpeg";
image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
}
}
private Image GetImage(byte[] storedImage)
{
var stream = new MemoryStream(storedImage);
return Image.FromStream(stream);
}
public bool IsReusable
{
get { return false; }
}
}

Answer 3

It appears that I can't do what I am trying using colorbox with an ashx image. If anyone finds a way please post it here.
I considered deleting the question but I will leave it up incase someone else runs into the same issue.

Answer 4

Find this function around line 124 (colorbox 1.3.15)
// Checks an href to see if it is a photo.
// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
function isImage(url) {
return settings.photo || /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
}
On line 127, add |ashx after bmp in (gif|png|jpg|jpeg|bmp) so it reads like this:
// Checks an href to see if it is a photo.
// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
function isImage(url) {
return settings.photo || /\.(gif|png|jpg|jpeg|bmp|ashx)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
}
This is working just fine for me in Sitecore 6.2 :)