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

      

  • 相关阅读:
    smtp发送邮件
    鼠标点击成烟花js代码
    使用Database Control访问数据库问题解决了
    ext grid 的每行最后一列添加 按钮
    jquery对下拉框的操作
    SQL Server 2005中DateTime类型转换为Varchar类型的所有格式
    winform安装项目、安装包的制作、部署
    js解释器rhino查看执行环境
    ecma2623执行环境练习
    javascript排序算法
  • 原文地址:https://www.cnblogs.com/binbang/p/4772629.html
Copyright © 2020-2023  润新知