ColorBox使用及处理流读取图片问题

jquery.ColorBox确实是一个非常强大的jquery弹出层插件，可以类似于幻灯片效果来展示图片；

正常的，我们使用colorBox需要引入jquery类库和colorbox的css文件

<link rel="stylesheet" href="colorbox.css" />
<script src='jquery-2.0.3.min.js'>
<script src="jquery.colorbox-min.js"></script>

在页面中使用colorbox代码如下

<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>

<script>
     $('a.gallery').colorbox();
</script>

以上为常规用法

我在开发的时候，因为项目需要，对图片的读取采用了流的方式，在图片展示正常的情况下，调用相同代码出现了展示文字的情况

<a class='gallery' href='../a.do?id=1'>Photo_1</a>
<a class='gallery' href='../a.do?id=2'>Photo_2</a>
<a class='gallery' href='../a.do?id=3'>Photo_3</a>

<pre name="code" class="html"><script>
     $('a.gallery').colorbox();
</script>

流图片读取的情况下如上所示

可见流读取的时候colorbox没有按照图片格式识别！

最后通过万能的stackoverflow找到类似的问题(http://stackoverflow.com/questions/22630233/strange-chars-on-colorbox-on-image-from-webapi)

var colorbox_params = {
						photo:true,
						reposition:true,
						scalePhotos:true,
						scrolling:false,
						previous:'<i class="icon-arrow-left"></i>',
						next:'<i class="icon-arrow-right"></i>',
						close:'×',
						current:'{current} of {total}',
						maxWidth:'100%',
						maxHeight:'100%',
						onOpen:function(){
							document.body.style.overflow = 'hidden';
						},
						onClosed:function(){
							document.body.style.overflow = 'auto';
						},
						onComplete:function(){
							$.colorbox.resize();
						}
					};
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);