wechat.preview v1.0.0

wechat.preview

jQuery , Zpeto微信预览图片接口插件,use $('.groups').preview('img')

使用

引入微信SDK文件,并进行相应配置

引入wechat.preview.js

api

$('.xx').preview(options)

option

• group:true 当item = false有效,标示是否对图片分组
• event:click 触发事件,默认为click
• autoSelector:.wx-preview-image 默认选择器.加载插件后会自动对他们初始化
• item : img 子选择器,默认为搜有的img元素
• attr : bgsrc item上的图片源属性名称
• debug: false 是否打开debug功能,打开后控制台会输出信息

获取源优先级

attr > data-src > data-bgsrc > src

自动调用

<div class="wx-preview-image">
    <img src="..." alt="">
    <img src="..." alt="">
    <img src="..." alt="">
</div>

或者

<ul class="wx-preview-image" data-item="li">
	<li data-src="imgsrc">图片1</li>
	<li data-src="imgsrc">图片2</li>
	<li data-src="imgsrc">图片3</li>
</ul>

或者

<ul class="wx-preview-image" data-attr="bgsrc">
	<li bgsrc="imgsrc">图片1</li>
	<li bgsrc="imgsrc">图片2</li>
	<li bgsrc="imgsrc">图片3</li>
</ul>

手动调用

<!-- group 1 -->
<div class="group1">
    <img src="http://www.iyi8.com/uploadfile/2015/0510/20150510123008147.jpg">
    <img src="http://img.7160.com/uploads/allimg/150313/9-150313112P1.jpg">
    <img src="http://imgt7.bdstatic.com/it/u=2,816153681&fm=25&gp=0.jpg">
</div>
<script>
	$('.group1').preview()
</script>

<!-- group 2 -->
<div class="group2">
    <img class="group2-detail" src="http://imgt8.bdstatic.com/it/u=2,802432002&fm=19&gp=0.jpg">
    <img class="group2-detail" src="http://imgt9.bdstatic.com/it/u=2,815580894&fm=19&gp=0.jpg">
    <img class="group2-detail" src="http://imgt9.bdstatic.com/it/u=2,519622157&fm=19&gp=0.jpg">
</div>
<script>
	$('.group2-detail').preview({group:true,item:false})
</script>

<!-- group 3 -->
<ul class="group3">
    <li data-src="http://www.iyi8.com/uploadfile/2015/0510/20150510123008147.jpg">image element</li>
    <li data-src="http://imgt8.bdstatic.com/it/u=2,802432002&fm=19&gp=0.jpg">image element</li>
    <li data-src="http://imgt9.bdstatic.com/it/u=2,815580894&fm=19&gp=0.jpg">image element</li>
    <li data-src="http://imgt9.bdstatic.com/it/u=2,519622157&fm=19&gp=0.jpg">image element</li>
</ul>
<script>
	$('.group3').preview({
	    item:'li'
	})
</script>