wechat.preview
v1.0.0
Published
jQuery , Zpeto微信预览图片接口插件,use $('.groups').preview('img')
Downloads
2
Readme
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>