This is a lightbox made with AngularUI Bootstrap Modal. It can be used in any Angular app. View the project and instructions on GitHub.
The lightbox nav is hidden when there is only one image.
index.html
<ul class="gallery gallery6" ng-controller="GalleryCtrl"> <li ng-repeat="image in images"> <a ng-click="openLightboxModal($index)"> <img ng-src="{{'\{\{image.thumbUrl\}\}'}}" class="img-thumbnail"> </a> </li> </ul>
demo5.js
angular.module('demo6', ['bootstrapLightbox']); angular.module('demo6').controller('GalleryCtrl', function ($scope, Lightbox) { $scope.images = [ { 'url': 'http://i.imgur.com/9RyWebb.jpg', 'thumbUrl': 'http://i.imgur.com/9RyWebbb.jpg' } ]; $scope.openLightboxModal = function (index) { Lightbox.openModal($scope.images, index); }; });