项目中经常遇到点击图片或者点击相册浏览大图的情景,SUI框架自带swiper滚动的效果,详情见http://m.sui.taobao.org/中的拓展组件--图片浏览器的效果,在项目中需要做到点击图片出现图片浏览器而不是点击固定的按钮,这就需要在js里做一些改变了。
部分html代码如下:
<div class="storeLook">
<div class="row">
<#list merchantFcPicsList as p>
<div class="col-33 albumImgs" data-src="${p.picUrl!''}">
<a href="#" class="pb-popup">
<img src="${p.picUrl!''}"/>
</a>
</div>
</#list>
</div>
</div>
这里是freemarker语法
<#list>循环出每一张图片,而data-src属性的值是图片的接口,img的src属性也是图片的接口。
部分js代码如下:
$(function(){
/*=== Popup ===*/
$(document).on('click','.albumImgs',function () {
var pic = $(this).parent().find(".albumImgs").map(function(){
return $(this).data("src");
}).get();
$.photoBrowser({
photos : pic,
type: 'popup'
}).open();
//myPhotoBrowserPopup.open();
});
});
});
var pic = $(this).parent().find(".albumImgs").map(function(){
return $(this).data("src");
}).get();
$.photoBrowser({
photos : pic,
type: 'popup'
}).open();
});
return 的值就是class为albumImgs的div的data-src属性,具体的var pic = $(function(){}).get()和$.photoBrowser({}).open()的具体用法楼主也是在网上找的方法,还有待进一步理解,这里只是把这个方法列出来权当做个笔记。另外,这个图片浏览都是默认从第一张开始的,而不是从点击的那一张图片开始,这个问题还有待日后解决,估计得去理解并修改sui框架里面底层swiper的一些属性或者方法。