angularjs angular-bootstrap-lightbox插件点击截图放大到原始尺寸功能

1.bower或者npm安装插件： bower install angular-bootstrap-lightbox --save 


         npm install angular-bootstrap-lightbox --save




2.index.html内添加

<script src="lib/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
  <link rel="stylesheet" href="lib/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.css">

3.app.js注入

angular.module('app', ['bootstrapLightbox']);

用法：

   html:	
<ul ng-controller="GalleryCtrl">
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" >
    </a>
  </li>
</ul>

控制器：angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [
    {
      'id': '1',
      'name': 'Optional',
      'thumbUrl': 'thumb1.jpg' // used only for this example
    },
    {
      'id': '2',
    'name': 'Ytgasa',
      'thumbUrl': 'thumb2.jpg'    },
    {
      'url': '3',
      'name': 'Wqqwqwe',
      'thumbUrl': 'thumb3.png'
    }
  ];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };
});

效果图：