Display ashx image using jQuery?

Question

I am trying to use the jQuery Colorbox plugin to display the images that I have in my database through an ashx file. Unfortunately, he just spits a bunch of gibberish at the top of the page and without an image. It can be done? Here is what I still have:

$(document).ready ( function () { $("a[rel='cbImg']").colorbox(); } ); ... <a rel="cbImg" href="HuntImage.ashx?id=15">Click to see image</a> 

UPDATE:

My ashx file writes a binary file:

  context.Response.ContentType = "image/bmp"; context.Response.BinaryWrite(ba); 

Answer 1

Colorbox has a photo option. If you set true to your constructor, it will make it display a photo.

 $(target).colorbox({photo: true}); 

Answer 2

You must set the src attribute on the client side.

 <img src="HuntImage.ashx?id=15" ..../> 

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 seems like I can't do what I'm trying to use the colorbox with the ashx image. If anyone finds a way, post it here.

I decided to delete the question, but I will leave it if someone else comes across the same question.

Answer 4

Find this function on 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 to (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 works great for me in Sitecore 6.2 :)