依赖
依赖于：photoswipe，所以需要先引入：photoswipe.css， default-skin.css， photoswipe.min.js， photoswipe-ui-default.min.js， 再引入angular-photoswipe.min.js
app.module.js
ng.module('app', [ 'ngPhotoswipe']);
html
<!-- 图片预览 -->
<div ng-photoswipe
slide-selector={{vm.photoswipe.dom}}
slides="vm.photoswipe.slides"
open="vm.photoswipe.open"
on-close="vm.photoswipe.closeFn()"
options="vm.photoswipe.opts"></div>
/* 需要点击预览的图片 */
<div>
<img class="timg" ng-click="vm.photoswipe.showFn($index)" ng-repeat='x in datas' src="{{x.pic}}"/>
</div>
注：1.要放在header,footer同级 2：slide-selector必须要写个class名，否则报错
controller
/**
* 预览大图：photoswipe
* 从服务器取到的图片数据
*
*/
function photoswipeFn(data){
vm.photoswipe = {
dom: '.timg',
slides: [], //图片数组
open: false, //是否显示
showFn: showFn, //显示
closeFn: closeFn, //隐藏
opts: {
index: 0
}
};
//预览大图
vm.title = '查看大图';
//显示
function showFn(i) {
if(angular.isDefined(i)) {
vm.photoswipe.opts.index = i;
}
vm.photoswipe.open = true;
};
//隐藏
function closeFn() {
vm.photoswipe.open = false;
};
/**
* 格式化图片列表
* 根据屏幕尺寸计算图片新的的高度（后台传有图片尺寸）
*/
angular.forEach(data, function(item){
var obj = {
src: item.pic_cover,
w: 500,
h: 500
};
if(item.pic_size){
var arr1 = item.pic_size.split(',');
obj.w = screen.width;
obj.h = obj.w * arr1[1] / arr1[0];
}
vm.photoswipe.slides.push(obj);
})
}
注：1：须要给图片宽高， 否则报错 2：需要给定dom元素的class名
参考资料
注：git上用法不详细，特此做一篇用法
需求
移动端商品详情页需要浏览详情图
前端环境
ionic, angular
