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
- Dependancy :
- Installation :
- Download and extract
bower install ng-bootstrap-lightbox
- Include stylesheet in your app
- Include scripts in your app :
- Inject
ngBootstrapLightbox
as module dependancy to your currentapp
angular;
Basic example :
Markup :
Controller :
angular //inject lightbox service to your controller ;
Configuration
Album array
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 . |
Lightbox options
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. |
Touch support
Added ngTouch
support.
- Include
ngTouch
scripts :
- Inject
ngTouch
as your module dependancy
angular;
You can now swipe left or right of your image on your mobile devices.
License
MIT