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