图片预览插件 angular-photoswipe

依赖

依赖于：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名

参考资料

github: https://github.com/m00s/angular-photoswipe

注：git上用法不详细，特此做一篇用法

需求

移动端商品详情页需要浏览详情图

前端环境

ionic, angular