ng-bootstrap-lightbox

Introduction

This angular module follows Lightbox2 implementation but make use of AngularUI Bootstrap Modal and CSS3 animation to work with AngularJS without the need of jQuery.

Demo

#### Demo

Setup

0. Dependancy :

- AngularJS (>= 1.4)
- AngularUI Bootstrap Modal (>= 0.14.3)

1. Installation :
- Download and extract
- bower install ng-bootstrap-lightbox

2. Include stylesheet in your app

``html


`

3. Include scripts in your app :

`html



`

4. Inject ngBootstrapLightbox as module dependancy to your current app

`js
angular.module('app', ['ngBootstrapLightbox']);
`

Basic example :

$3

`html


`js
angular
.module('app')

//inject lightbox service to your controller
.controller('Ctrl', function(lightbox){

//list available lightbox default options
this.options = {
fadeDuration: 0.7,
resizeDuration: 0.5,
fitImageInViewPort: true,
positionFromTop: 20,
showImageNumberLabel: false,
alwaysShowNavOnTouchDevices: false,
wrapAround: false
};

this.album = [{
src: '1.png',
thumb: '1-thumb.png',
caption: 'Optional caption 1'
}, {
src: '2.png',
thumb: '2-thumb.png',
caption: 'Optional caption 2'
}, {
src: '3.png',
thumb: '3-thumb.png',
caption: 'Optional caption 3'
}];

this.open = function($index){
lightbox.open(this.album, $index, this.options);
}
});
`

Configuration

$3

Each object of album array inside controller may contains 3 properties :

Properties | Requirement | Description
----------|-------------|------------
src | Required | The source image to your thumbnail that you want to with use lightbox when user click on thumbnail image
caption | Optional | Your caption corresponding with your image
thumb | Optional | Source of your thumbnail. You can use whatever properties your like, just to make sure that your controller understand that properties.

$3

Properties | Default | Description
-----------|---------|------------
fadeDuration | 0.7 seconds | duration starting when the src image is loaded to fully appear onto screen.
resizeDuration | 0.5 seconds | duration starting when Lightbox container change its dimension from a default/previous image to the current image when the current image is loaded.
fitImageInViewPort | true | Determine whether lightbox will use the natural image width/height or change the image width/height to fit the view of current window. Change this option to true to prevent problem when image too big compare to browser windows.
positionFromTop | 20 px | The position of lightbox from the top of window browser
showImageNumberLabel | false | Determine whether to show the image number to user. The default text shown is Image IMAGE_NUMBER of ALBUM_LENGTH
alwaysShowNavOnTouchDevices | false | Determine whether to show left/right arrow to user on Touch devices.
wrapAround | false | Determine whether to move to the start of the album when user reaches the end of album and vice versa. Set it to true to enable this feature.

$3

Added ngTouch support.

1. Include ngTouch scripts :

`html

`

2. Inject ngTouch as your module dependancy
`js
angular.module('app', ['ngBootstrapLightbox', 'ngTouch']);
``

You can now swipe left or right of your image on your mobile devices.

License

MIT