This is a lightbox made with AngularUI Bootstrap Modal. It can be used in any Angular app. View the project and instructions on GitHub.
When LightboxProvider.fullScreenMode
is set to true
, all images are scaled to the maximum possible dimensions.
index.html
<div ng-controller="AppCtrl">
<a ng-click="openLightboxModal(images)" class="btn btn-lg btn-success">
Open the lightbox
</a>
</div>
demo4.js
angular.module('demo4', ['bootstrapLightbox']);
angular.module('demo4').config(function (LightboxProvider) {
LightboxProvider.fullScreenMode = true;
});
angular.module('demo4').controller('AppCtrl', function ($scope, Lightbox) {
$scope.images = [
'http://lorempizza.com/600/400',
'http://lorempizza.com/500/400',
'http://lorempizza.com/600/300',
'http://lorempizza.com/500/500',
'http://lorempizza.com/500/700',
'http://lorempizza.com/1000/200',
'http://lorempizza.com/400/800',
'http://lorempizza.com/300/500',
'http://lorempizza.com/200/1000',
'http://lorempizza.com/300/300',
];
$scope.openLightboxModal = function (images) {
Lightbox.openModal(images, 0);
};
});