Ng-bootstrap-lightbox NPM

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

Setup

Dependancy :

Installation :

Download and extract
bower install ng-bootstrap-lightbox

Include stylesheet in your app

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="dist/css/lightbox.min.css" type="text/css">

Include scripts in your app :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"> </script>
<script src="dist/js/bootstrap-modal.min.js"></script>
<script src="dist/js/lightbox.min.js"></script>

Inject ngBootstrapLightbox as module dependancy to your current app
```
angular.module('app', ['ngBootstrapLightbox']);
```

Basic example :

Markup :

<div ng-controller="Ctrl as Ctrl">
  <div ng-repeat="image in Ctrl.album">
   <img ng-src="{{image.thumb}}" ng-click = "Ctrl.open($index)"/>
  </div>
</div>

Controller :

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.

Include ngTouch scripts :

<script src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.js'></script>

Inject ngTouch as your module dependancy

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

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

License

MIT

lightbox2 angularjs directives lightbox2 angular angular directives

@everything-registry/sub-chunk-2271 @zalastax/nolb-ng-b @infinitebrahmanuniverse/nolb-ng-b

1.0.1

6 years ago