jquery 图片预览 音频预览 视频预览 layui弹窗 template模板显示

<div class="userimg">
	{{# layui.each(items.data, function(idx1, items1){ }}
		{{# if(items1.itemtype == '10'){ }}
		<div class="videoviews">
			<video src="{{items1.url}}" width="68px" height="68px" data-role="videoviews">
			</video>
		</div>
		{{# }else if(items1.itemtype == '20'){ }}
		<div class="audioviews" data-role="{{items1.url}}" style="width:68px;height:68px;"></div>
		{{# }else{ }}
		<div><img src="{{items1.url}}" width="68px" height="68px" data-role="imgviews"/></div>
		{{# } }} 
	{{# }); }}
</div>

//图片预览
function previewImg(obj) {
	var imgHtml = "<img src='" + obj + "' 
					style='max-width:100%;max-height:100%;display:block;margin:0 auto'/>";  
	layer.open({  
		type: 1,  
		shade: 0.8,
		offset: 'auto',
		area: ['500px','500px'],
		shadeClose:true,//点击外围关闭弹窗
		scrollbar: false,//不现实滚动条
		title: "图片预览", //不显示标题  
		content: imgHtml  
	}); 
}
//音频预览
function previewaudio(obj) {
	var audioHtml = '<div style="padding:20px;margin:0 auto;">
	<audio src="'+obj+'" width="68px" height="68px" controls></audio></div>';  
	//弹出层
	layer.open({  
		type: 1,  
		shade: 0.8,
		offset: 'auto',
		area: ['auto','200px'],
		shadeClose:true,//点击外围关闭弹窗
		scrollbar: false,//不现实滚动条
		title: "音频预览", //不显示标题  
		content: audioHtml 
	}); 
}

//视频预览
function previewvideo(obj) {
	var videoHtml = '<div style="margin:0 auto;">
	<video src="'+obj+'" width="500px" height="440px" controls></video></div>';  
	console.log(videoHtml);
	//弹出层
	layer.open({  
		type: 1,  
		shade: 0.8,
		offset: 'auto',
		area: ['500px','500px'],
		shadeClose:true,//点击外围关闭弹窗
		scrollbar: false,//不现实滚动条
		title: "视频预览", //不显示标题  
		content: videoHtml 
	}); 
}
//预览图片
$(document).on('click', '[data-role="imgviews"]', function(imgsrc) {
	var _src = $(this).attr('src');
	previewImg(_src);
})
//预览音频
$(document).on('click', '.audioviews', function(imgsrc) {
	var _src = $(this).attr('data-role');
	previewaudio(_src);
})
//预览音频
$(document).on('click', '.videoviews', function(imgsrc) {
	var _src = $(this).find('video').attr('src');
	previewvideo(_src);
})