colorbox弹出层图片显示

基本配置

　　

eg:多图片显示，后台数据返回

　　

$.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 = '
'+
										''+
			  								''+
			  								'
'+
											'
查看大图
'+
											'
 '+
										''+
									'
';
						$('#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:'',
				next:'',
				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("");//let's add a custom loading icon
			});
			
			$selfDialog.dialog($.extend(dialogOption,{title:"报告详情"}));
			$selfDialog.dialog("open");
		};
		

　　

转载于:https://www.cnblogs.com/binbang/p/4772629.html