Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themyth92/ng-bootstrap-lightbox
An angular lightbox using AngularUI modal
https://github.com/themyth92/ng-bootstrap-lightbox
angular-bootstrap-ligthbox angularjs lightbox2
Last synced: 18 days ago
JSON representation
An angular lightbox using AngularUI modal
- Host: GitHub
- URL: https://github.com/themyth92/ng-bootstrap-lightbox
- Owner: themyth92
- License: mit
- Created: 2015-05-26T03:12:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-07T07:05:36.000Z (over 7 years ago)
- Last Synced: 2024-10-06T13:18:11.412Z (about 1 month ago)
- Topics: angular-bootstrap-ligthbox, angularjs, lightbox2
- Language: JavaScript
- Homepage: http://themyth92.com/project/ng-bootstrap-lightbox/index.html
- Size: 968 KB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-bootstrap-lightbox
## Introduction
This angular module follows [Lightbox2](http://lokeshdhakar.com/projects/lightbox2/) implementation but make use of [AngularUI Bootstrap Modal](http://angular-ui.github.io/bootstrap/#/modal) and CSS3 animation to work with AngularJS without the need of jQuery.
## Demo
#### [Demo](https://themyth92.com/project/ng-bootstrap-lightbox/index.html)
## Setup
0. Dependancy :
- [AngularJS (>= 1.4)](https://angularjs.org/)
- [AngularUI Bootstrap Modal (>= 0.14.3)](http://angular-ui.github.io/bootstrap/#/modal)
1. Installation :
- [Download and extract](https://github.com/themyth92/ng-bootstrap-lightbox/archive/master.zip)
- `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 :
### Markup :
```html
![]()
```
### Controller :
```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
### 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.
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