码迷,mamicode.com
首页 > 其他好文 > 详细

colorbox弹出层图片显示

时间:2015-08-31 13:05:28      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:

基本配置

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

  

colorbox弹出层图片显示

标签:

原文地址:http://www.cnblogs.com/binbang/p/4772629.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!