Problem while working with Jquery colorbox and dynamic images that reading via Aspx

Question

for showing full size images on my site I've decided to use Jquery.colorbox , this pluging works well with static image location like :

<a rel="ex1" href="http://www.blah.com/image.jpg"><img src="http://www.blah.com/image_thumb.jpg"/></a>

but when I want to get the images from a directiry using binary read/write this plugin showing me garbage data not a compiled jpg/image like following :

<a rel="ex1" href="http://www.blah.com/getimage.aspx?id=1234"><img src="http://www.blah.com/getimage.aspx?id=1234"/></a>

and here is my snippet code for getting dynamic image :

thumbLocation = DataHelper.GetItemPicture(recordID);
using (FileStream IMG = new FileStream(thumbLocation, FileMode.Open))
                        {
                            //FileStream IMG = new FileStream(thumbLocation, FileMode.Open);
                            byte[] buffer = new byte[IMG.Length];
                            IMG.Read(buffer, 0, (int)IMG.Length);
                            Response.Clear();
                            Response.ContentType = "image/JPEG";
                            Response.AddHeader("Content-Length", buffer.Length.ToString());
                            Response.BinaryWrite(buffer);
                            Response.End();}

how can I fix the problem?

Answer 1

Use colorbox's photo property. Example:

$('a.example').colorbox({photo:true});

The reason is that colorbox's regex to auto-detect image URLs is going to fail for that kind of URL (doesn't contain an image-type extension).