基本配置
<script type="text/javascript"> jQuery(function($) { var colorbox_params = { rel: 'colorbox', reposition:true, scalePhotos:true, scrolling:false, close:'×', maxWidth:'90%', maxHeight:'90%', previous:'<i class="ace-icon fa fa-arrow-left"></i>', next:'<i class="ace-icon fa fa-arrow-right"></i>', current:'{current} of {total}', onOpen:function(){ $overflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; }, onClosed:function(){ document.body.style.overflow = $overflow; }, onComplete:function(){ $.colorbox.resize(); } } $('[data-rel="colorbox"]').colorbox(colorbox_params); $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange'></i>");//let's add a custom loading icon }); </script>
eg:多图片显示,后台数据返回
<div class="form-group "> <div class="row"> <div class="col-sm-12" style="padding-left:60px;padding-top:10px"> <ul id="uploadPic" class="ace-thumbnails clearfix"> </ul> </div> </div> </div>
$.fn.selfDetail = function(){ $('#uploadPic').empty(); var obj = $selfGrid.getRowData($(this).attr("data-rowid")); for(var propName in obj){ if(propName.indexOf("attachPicFileId") > -1){ if(obj[propName]){ var path=Const.MEDIA_SERVER + '/img/' + obj[propName]+'.jpg'; var html = '<li id="li'+propName+'">'+ '<a href="'+path+'" id="a'+propName+'" data-rel="colorbox">'+ '<img id="img'+propName+'" width="150" height="150" alt="150x150" src="'+path+'" />'+ '<div class="text">'+ '<div class="inner">查看大图</div>'+ '</div> '+ '</a>'+ '</li>'; $('#uploadPic').append(html); } }else{ $selfDialog.find("[id='"+propName+"']").text(obj[propName]); } } jQuery(function($) { var colorbox_params = { rel: 'colorbox', reposition:true, scalePhotos:true, scrolling:false, close:'×', maxWidth:'90%', maxHeight:'90%', previous:'<i class="ace-icon fa fa-arrow-left"></i>', next:'<i class="ace-icon fa fa-arrow-right"></i>', current:'{current} of {total}', onOpen:function(){ $overflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; }, onClosed:function(){ document.body.style.overflow = $overflow; }, onComplete:function(){ $.colorbox.resize(); } } $('[data-rel="colorbox"]').colorbox(colorbox_params); $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange'></i>");//let's add a custom loading icon }); $selfDialog.dialog($.extend(dialogOption,{title:"报告详情"})); $selfDialog.dialog("open"); };