高级弹出层(图片)


单图放大
代码
<!--div只是为了图片样式,实际使用中不需要-->
<div style="width:200px;height:200px;overflow:hidden;">
	<a href="javascript:;" onclick="img(this)">
		<img src="http://img.javaex.cn/00606MLggy1fn0brkbmm8j30fp0llgn2.jpg" width="100%">
	</a>
</div>

<script>
	// obj为当前点击的元素对象
	function img(obj) {
		javaex.dialog({
			type : "image",	// 弹出层类型
			url : obj.children[0].src	// 图片地址
		});
	}
	
	// 或者下面这种写法
	$("img").click(function() {
		javaex.dialog({
			type : "image",	// 弹出层类型
			url : $(this).attr("src")	// 图片地址
		});
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 type 必须是image
2 url 图片地址,就按照示例中的写

多图切换
代码
<style>
	#demo li img {
		float:left;
	}
</style>

<!--下列样式仅仅是为了排版,实际使用中不需要这么写-->
<div id="demo">
	<ul>
		<li><img src="http://img5.mtime.cn/mg/2017/12/14/160632.57240275.jpg" width="200px" height="auto"/></li>
		<li><img src="http://img5.mtime.cn/mg/2017/11/23/160823.83070133.jpg" width="200px" height="auto"/></li>
		<li><img src="http://img5.mtime.cn/mg/2017/12/01/100905.24583483.jpg" width="200px" height="auto"/></li>
		<li><img src="http://img5.mtime.cn/mg/2017/12/18/173438.11723856.jpg" width="200px" height="auto"/></li>
		<li><img src="http://img5.mtime.cn/mg/2017/09/05/140933.83342333.jpg" width="200px" height="auto"/></li>
	</ul>
</div>

<script>
	// 请按实际需求填写jQuery选择器,最终指定到img即可
	$("#demo li img").click(function() {
		javaex.dialog({
			type : "images",	// 弹出层类型
			selector : "#demo li img",	// jQuery选择器,和上面保持一致
			url : $(this).attr("src")	// 图片地址,就这么写
		});
	});
</script>
参数说明(使用属性默认值时,可以缺省该属性)
序号 属性名 默认值 说明
1 type 必须是images
2 selector jQuery选择器,和调用的选择器保持一致
3 url 图片地址,就按照示例中的写
4 placeholder data:image/png;base64... 图片延迟加载时的占位内容
5 dataOriginal data-original 图片延迟加载时,从该属性中获取真正的图片地址