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

      

  • 相关阅读:
    腰颈椎病康复运动治疗
    丹田呼吸简易教程
    丹田呼吸法
    GNU 汇编语言
    openssl命令简介
    AES128 + cbc + pkcs7 编码C语言实现
    一些linux下的性能监测工具
    git 基本使用教程
    【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)
    【译】UI设计基础(UI Design Basics)--启动与停止(Starting and Stopping)(五)
  • 原文地址:https://www.cnblogs.com/binbang/p/4772629.html
Copyright © 2020-2023  润新知