为了方便图片弹窗预览，系统内置引入了 colorbox 插件  http://www.jacklmoore.com/colorbox/

使用示例

1、页面引入 olorbox 插件（其中 example1 为选择风格，可选风格为 example1、example2、example3、example4、example5）

{{extend name="$__TEMPLATE_BASE__" /}}
{{block name="append_head"}}
<script src="/library/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="/library/colorbox/example1/colorbox.css">
{{/block}}
{{block name="content"}}
//页面内容
<!--以下图片会作为分组循环展示（通过JS添加 href 属性）-->
<div id="content1">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
    <img src="5.jpg">
</div>
<!--以下图片会作为分组循环展示-->
<div id="content2">
    <a href="1-big.jpg"><img src="1-small.jpg"></a>
    <a href="2-big.jpg"><img src="2-small.jpg"></a>
    <a href="3-big.jpg"><img src="3-small.jpg"></a>
    <a href="4-big.jpg"><img src="4-small.jpg"></a>
    <a href="5-big.jpg"><img src="5-small.jpg"></a>
</div>
<!--以下图片会根据 class 进行分组循环展示-->
<div id="content3">
    <a href="1-big.jpg" class="ref1"><img src="1-small.jpg"></a>
    <a href="2-big.jpg" class="ref1"><img src="2-small.jpg"></a>
    <a href="3-big.jpg" class="ref1"><img src="3-small.jpg"></a>
    <a href="4-big.jpg" class="ref2"><img src="4-small.jpg"></a>
    <a href="5-big.jpg" class="ref2"><img src="5-small.jpg"></a>
</div>
<!--以下图片不会进行遍历展示，只会每张点击后单独展示-->
<div id="content4">
    <a href="1-big.jpg"><img src="1-small.jpg"></a>
    <a href="2-big.jpg"><img src="2-small.jpg"></a>
    <a href="3-big.jpg"><img src="3-small.jpg"></a>
    <a href="4-big.jpg"><img src="4-small.jpg"></a>
    <a href="5-big.jpg"><img src="5-small.jpg"></a>
</div>
{{/block}}

2、JS调用需要弹窗的元素

//对选中的一组图片进行循环预览，且图片没有 href 属性
$("#portal_article_content img").each(function(){
   $(this).attr('href',$(this).attr('src'))
})
$("#content1 img").colorbox( {rel:true,'maxHeight':'90%','maxWidth':'90%' } );

//对选中的一组包含 href 属性的元素进行循环预览（href值是预览图）
$("#content2 a").colorbox( {rel:true,'maxHeight':'90%','maxWidth':'90%' } );

//根据class进行分组预览
$("#content3 a").colorbox( {rel:'ref1','maxHeight':'90%','maxWidth':'90%' } );
$("#content3 a").colorbox( {rel:'ref2','maxHeight':'90%','maxWidth':'90%' } );

//分别预览独立图片（不进行分组循环）
$("#content4 a").colorbox( {'maxHeight':'90%','maxWidth':'90%' } );