Skip to content

Latest commit

 

History

History
138 lines (101 loc) · 4.44 KB

README.md

File metadata and controls

138 lines (101 loc) · 4.44 KB
Raw

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

  1. Dependancy :
  1. Installation :
  1. 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">
  1. 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>
  1. 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.

  1. Include ngTouch scripts :
<script src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.js'></script>
  1. 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