colorbox弹出层图片显示

基本配置

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