The image slider directive based on lightbox2 created by Lokesh Dhakar (http://lokeshdhakar.com/projects/lightbox2/) for angularjs app. This directive does not use jQuery but use css3 animation in replacement.
npm install ng-bootstrap-lightboxThis 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
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`
ngBootstrapLightbox
4. Inject as module dependancy to your current app
`js`
angular.module('app', ['ngBootstrapLightbox']);
`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);
}
});
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 imagecontroller
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 understand that properties.
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_LENGTHleft/right
alwaysShowNavOnTouchDevices | false | Determine whether to show 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.
Added ngTouch support.
1. Include ngTouch scripts :
`html`
ngTouch
2. Inject as your module dependancy`
js``
angular.module('app', ['ngBootstrapLightbox', 'ngTouch']);
You can now swipe left or right of your image on your mobile devices.
MIT