Lightbox service: support custom inline templates

README.md

@@ -92,11 +92,20 @@ If you make your own template and save it at `lightbox.html`, no further code is
 
 ```js
 angular.module('app').config(function (LightboxProvider) {
-  // set a custom template
+  // set a custom template path
   LightboxProvider.templateUrl = 'path/to/your-template.html';
 });
 ```
 
+Alternatively, you can set an inline template in the provider:
+
+```js
+angular.module('app').config(function (LightboxProvider) {
+  // set a custom template
+  LightboxProvider.template = '<h2>Customized</h2><img lightbox-src="{{Lightbox.imageUrl}}"><h2>lightbox</h2>';
+});
+```
+
 ### Disabling the keyboard navigation
 
 The keyboard navigation in the lightbox with the left/right arrow keys can be enabled/disabled at any time by changing the value of the boolean `Lightbox.keyboardNavEnabled`.

api.md

@@ -1,43 +1,47 @@
 <a name="bootstrapLightbox"></a>
+
 ## bootstrapLightbox : <code>object</code>
 **Kind**: global namespace  
 
 * [bootstrapLightbox](#bootstrapLightbox) : <code>object</code>
-  * [.ImageLoader](#bootstrapLightbox.ImageLoader)
-    * [.load](#bootstrapLightbox.ImageLoader.load) ⇒ <code>Promise</code>
-  * [.Lightbox](#bootstrapLightbox.Lightbox)
-    * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : <code>String</code>
-    * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : <code>Boolean</code>
-    * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ <code>String</code>
-    * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ <code>String</code>
-    * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ <code>Object</code>
-    * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ <code>Object</code>
-    * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ <code>Boolean</code>
-    * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ <code>Boolean</code>
-    * [.images](#bootstrapLightbox.Lightbox.images) : <code>Array</code>
-    * [.index](#bootstrapLightbox.Lightbox.index) : <code>Number</code>
-    * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : <code>Boolean</code>
-    * [.image](#bootstrapLightbox.Lightbox.image) : <code>\*</code>
-    * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : <code>Object</code>
-    * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : <code>String</code>
-    * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : <code>String</code>
-    * [.loading](#bootstrapLightbox.Lightbox.loading) : <code>Boolean</code>
-    * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ <code>Object</code>
-    * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : <code>function</code>
-    * [.setImage](#bootstrapLightbox.Lightbox.setImage) : <code>function</code>
-    * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : <code>function</code>
-    * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : <code>function</code>
-    * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : <code>function</code>
-    * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : <code>function</code>
-    * [.setImages](#bootstrapLightbox.Lightbox.setImages) : <code>function</code>
-  * [.lightboxSrc](#bootstrapLightbox.lightboxSrc)
+    * [.ImageLoader](#bootstrapLightbox.ImageLoader)
+        * [.load](#bootstrapLightbox.ImageLoader.load) ⇒ <code>Promise</code>
+    * [.Lightbox](#bootstrapLightbox.Lightbox)
+        * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : <code>String</code>
+        * [.template](#bootstrapLightbox.Lightbox.template) : <code>String</code>
+        * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : <code>Boolean</code>
+        * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ <code>String</code>
+        * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ <code>String</code>
+        * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ <code>Object</code>
+        * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ <code>Object</code>
+        * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ <code>Boolean</code>
+        * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ <code>Boolean</code>
+        * [.images](#bootstrapLightbox.Lightbox.images) : <code>Array</code>
+        * [.index](#bootstrapLightbox.Lightbox.index) : <code>Number</code>
+        * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : <code>Boolean</code>
+        * [.image](#bootstrapLightbox.Lightbox.image) : <code>\*</code>
+        * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : <code>Object</code>
+        * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : <code>String</code>
+        * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : <code>String</code>
+        * [.loading](#bootstrapLightbox.Lightbox.loading) : <code>Boolean</code>
+        * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ <code>Object</code>
+        * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : <code>function</code>
+        * [.setImage](#bootstrapLightbox.Lightbox.setImage) : <code>function</code>
+        * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : <code>function</code>
+        * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : <code>function</code>
+        * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : <code>function</code>
+        * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : <code>function</code>
+        * [.setImages](#bootstrapLightbox.Lightbox.setImages) : <code>function</code>
+    * [.lightboxSrc](#bootstrapLightbox.lightboxSrc)
 
 <a name="bootstrapLightbox.ImageLoader"></a>
+
 ### bootstrapLightbox.ImageLoader
 Service for loading an image.
 
 **Kind**: static class of <code>[bootstrapLightbox](#bootstrapLightbox)</code>  
 <a name="bootstrapLightbox.ImageLoader.load"></a>
+
 #### ImageLoader.load ⇒ <code>Promise</code>
 Load the image at the given URL.
 
@@ -50,48 +54,59 @@ Load the image at the given URL.
 | url | <code>String</code> | 
 
 <a name="bootstrapLightbox.Lightbox"></a>
+
 ### bootstrapLightbox.Lightbox
 Lightbox service.
 
 **Kind**: static class of <code>[bootstrapLightbox](#bootstrapLightbox)</code>  
 
 * [.Lightbox](#bootstrapLightbox.Lightbox)
-  * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : <code>String</code>
-  * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : <code>Boolean</code>
-  * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ <code>String</code>
-  * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ <code>String</code>
-  * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ <code>Object</code>
-  * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ <code>Object</code>
-  * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ <code>Boolean</code>
-  * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ <code>Boolean</code>
-  * [.images](#bootstrapLightbox.Lightbox.images) : <code>Array</code>
-  * [.index](#bootstrapLightbox.Lightbox.index) : <code>Number</code>
-  * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : <code>Boolean</code>
-  * [.image](#bootstrapLightbox.Lightbox.image) : <code>\*</code>
-  * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : <code>Object</code>
-  * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : <code>String</code>
-  * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : <code>String</code>
-  * [.loading](#bootstrapLightbox.Lightbox.loading) : <code>Boolean</code>
-  * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ <code>Object</code>
-  * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : <code>function</code>
-  * [.setImage](#bootstrapLightbox.Lightbox.setImage) : <code>function</code>
-  * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : <code>function</code>
-  * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : <code>function</code>
-  * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : <code>function</code>
-  * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : <code>function</code>
-  * [.setImages](#bootstrapLightbox.Lightbox.setImages) : <code>function</code>
+    * [.templateUrl](#bootstrapLightbox.Lightbox.templateUrl) : <code>String</code>
+    * [.template](#bootstrapLightbox.Lightbox.template) : <code>String</code>
+    * [.fullScreenMode](#bootstrapLightbox.Lightbox.fullScreenMode) : <code>Boolean</code>
+    * [.getImageUrl](#bootstrapLightbox.Lightbox.getImageUrl) ⇒ <code>String</code>
+    * [.getImageCaption](#bootstrapLightbox.Lightbox.getImageCaption) ⇒ <code>String</code>
+    * [.calculateImageDimensionLimits](#bootstrapLightbox.Lightbox.calculateImageDimensionLimits) ⇒ <code>Object</code>
+    * [.calculateModalDimensions](#bootstrapLightbox.Lightbox.calculateModalDimensions) ⇒ <code>Object</code>
+    * [.isVideo](#bootstrapLightbox.Lightbox.isVideo) ⇒ <code>Boolean</code>
+    * [.isSharedVideo](#bootstrapLightbox.Lightbox.isSharedVideo) ⇒ <code>Boolean</code>
+    * [.images](#bootstrapLightbox.Lightbox.images) : <code>Array</code>
+    * [.index](#bootstrapLightbox.Lightbox.index) : <code>Number</code>
+    * [.keyboardNavEnabled](#bootstrapLightbox.Lightbox.keyboardNavEnabled) : <code>Boolean</code>
+    * [.image](#bootstrapLightbox.Lightbox.image) : <code>\*</code>
+    * [.modalInstance](#bootstrapLightbox.Lightbox.modalInstance) : <code>Object</code>
+    * [.imageUrl](#bootstrapLightbox.Lightbox.imageUrl) : <code>String</code>
+    * [.imageCaption](#bootstrapLightbox.Lightbox.imageCaption) : <code>String</code>
+    * [.loading](#bootstrapLightbox.Lightbox.loading) : <code>Boolean</code>
+    * [.openModal](#bootstrapLightbox.Lightbox.openModal) ⇒ <code>Object</code>
+    * [.closeModal](#bootstrapLightbox.Lightbox.closeModal) : <code>function</code>
+    * [.setImage](#bootstrapLightbox.Lightbox.setImage) : <code>function</code>
+    * [.firstImage](#bootstrapLightbox.Lightbox.firstImage) : <code>function</code>
+    * [.prevImage](#bootstrapLightbox.Lightbox.prevImage) : <code>function</code>
+    * [.nextImage](#bootstrapLightbox.Lightbox.nextImage) : <code>function</code>
+    * [.lastImage](#bootstrapLightbox.Lightbox.lastImage) : <code>function</code>
+    * [.setImages](#bootstrapLightbox.Lightbox.setImages) : <code>function</code>
 
 <a name="bootstrapLightbox.Lightbox.templateUrl"></a>
+
 #### Lightbox.templateUrl : <code>String</code>
 Template URL passed into `$uibModal.open()`.
 
+**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
+<a name="bootstrapLightbox.Lightbox.template"></a>
+
+#### Lightbox.template : <code>String</code>
+Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`.
+
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.fullScreenMode"></a>
+
 #### Lightbox.fullScreenMode : <code>Boolean</code>
 Whether images should be scaled to the maximum possible dimensions.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.getImageUrl"></a>
+
 #### Lightbox.getImageUrl ⇒ <code>String</code>
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 **Returns**: <code>String</code> - The URL of the given image.  
@@ -101,6 +116,7 @@ Whether images should be scaled to the maximum possible dimensions.
 | image | <code>\*</code> | An element in the array of images. |
 
 <a name="bootstrapLightbox.Lightbox.getImageCaption"></a>
+
 #### Lightbox.getImageCaption ⇒ <code>String</code>
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 **Returns**: <code>String</code> - The caption of the given image.  
@@ -110,6 +126,7 @@ Whether images should be scaled to the maximum possible dimensions.
 | image | <code>\*</code> | An element in the array of images. |
 
 <a name="bootstrapLightbox.Lightbox.calculateImageDimensionLimits"></a>
+
 #### Lightbox.calculateImageDimensionLimits ⇒ <code>Object</code>
 Calculate the max and min limits to the width and height of the displayed
   image (all are optional). The max dimensions override the min
@@ -124,6 +141,7 @@ Calculate the max and min limits to the width and height of the displayed
 | dimensions | <code>Object</code> | Contains the properties `windowWidth`,   `windowHeight`, `imageWidth`, and `imageHeight`. |
 
 <a name="bootstrapLightbox.Lightbox.calculateModalDimensions"></a>
+
 #### Lightbox.calculateModalDimensions ⇒ <code>Object</code>
 Calculate the width and height of the modal. This method gets called
   after the width and height of the image, as displayed inside the modal,
@@ -137,6 +155,7 @@ Calculate the width and height of the modal. This method gets called
 | dimensions | <code>Object</code> | Contains the properties `windowWidth`,   `windowHeight`, `imageDisplayWidth`, and `imageDisplayHeight`. |
 
 <a name="bootstrapLightbox.Lightbox.isVideo"></a>
+
 #### Lightbox.isVideo ⇒ <code>Boolean</code>
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 **Returns**: <code>Boolean</code> - Whether the provided element is a video.  
@@ -146,6 +165,7 @@ Calculate the width and height of the modal. This method gets called
 | image | <code>\*</code> | An element in the array of images. |
 
 <a name="bootstrapLightbox.Lightbox.isSharedVideo"></a>
+
 #### Lightbox.isSharedVideo ⇒ <code>Boolean</code>
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 **Returns**: <code>Boolean</code> - Whether the provided element is a video that is to be
@@ -157,34 +177,40 @@ Calculate the width and height of the modal. This method gets called
 | image | <code>\*</code> | An element in the array of images. |
 
 <a name="bootstrapLightbox.Lightbox.images"></a>
+
 #### Lightbox.images : <code>Array</code>
 Array of all images to be shown in the lightbox (not `Image` objects).
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.index"></a>
+
 #### Lightbox.index : <code>Number</code>
 The index in the `Lightbox.images` aray of the image that is currently
   shown in the lightbox.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.keyboardNavEnabled"></a>
+
 #### Lightbox.keyboardNavEnabled : <code>Boolean</code>
 Whether keyboard navigation is currently enabled for navigating through
   images in the lightbox.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.image"></a>
+
 #### Lightbox.image : <code>\*</code>
 The image currently shown in the lightbox.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.modalInstance"></a>
+
 #### Lightbox.modalInstance : <code>Object</code>
 The UI Bootstrap modal instance. See {@link
   http://angular-ui.github.io/bootstrap/#/modal}.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.imageUrl"></a>
+
 #### Lightbox.imageUrl : <code>String</code>
 The URL of the current image. This is a property of the service rather
   than of `Lightbox.image` because `Lightbox.image` need not be an
@@ -193,16 +219,19 @@ The URL of the current image. This is a property of the service rather
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.imageCaption"></a>
+
 #### Lightbox.imageCaption : <code>String</code>
 The optional caption of the current image.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.loading"></a>
+
 #### Lightbox.loading : <code>Boolean</code>
 Whether an image is currently being loaded.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.openModal"></a>
+
 #### Lightbox.openModal ⇒ <code>Object</code>
 Open the lightbox modal.
 
@@ -216,6 +245,7 @@ Open the lightbox modal.
 | modalParams | <code>Object</code> | Custom params for the angular UI   bootstrap modal (in $uibModal.open()). |
 
 <a name="bootstrapLightbox.Lightbox.closeModal"></a>
+
 #### Lightbox.closeModal : <code>function</code>
 Close the lightbox modal.
 
@@ -226,6 +256,7 @@ Close the lightbox modal.
 | result | <code>\*</code> | This argument can be useful if the modal promise   gets handler(s) attached to it. |
 
 <a name="bootstrapLightbox.Lightbox.setImage"></a>
+
 #### Lightbox.setImage : <code>function</code>
 This method can be used in all methods which navigate/change the
   current image.
@@ -237,26 +268,31 @@ This method can be used in all methods which navigate/change the
 | newIndex | <code>Number</code> | The index in the array of images to set as   the new current image. |
 
 <a name="bootstrapLightbox.Lightbox.firstImage"></a>
+
 #### Lightbox.firstImage : <code>function</code>
 Navigate to the first image.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.prevImage"></a>
+
 #### Lightbox.prevImage : <code>function</code>
 Navigate to the previous image.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.nextImage"></a>
+
 #### Lightbox.nextImage : <code>function</code>
 Navigate to the next image.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.lastImage"></a>
+
 #### Lightbox.lastImage : <code>function</code>
 Navigate to the last image.
 
 **Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>  
 <a name="bootstrapLightbox.Lightbox.setImages"></a>
+
 #### Lightbox.setImages : <code>function</code>
 Call this method to set both the array of images and the current image
   (based on the current index). A use case is when the image collection
@@ -270,6 +306,7 @@ Call this method to set both the array of images and the current image
 | newImages | <code>Array</code> | The new array of images. |
 
 <a name="bootstrapLightbox.lightboxSrc"></a>
+
 ### bootstrapLightbox.lightboxSrc
 This attribute directive is used in an `<img>` element in the
   modal template in place of `src`. It handles resizing both the `<img>`

dist/angular-bootstrap-lightbox.js

@@ -85,6 +85,14 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
    */
   this.templateUrl = 'lightbox.html';
 
+  /**
+   * Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`.
+   * @type     {String}
+   * @name     template
+   * @memberOf bootstrapLightbox.Lightbox
+   */
+  this.template = null;
+
   /**
    * Whether images should be scaled to the maximum possible dimensions.
    * @type     {Boolean}
@@ -251,6 +259,7 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
     // set the configurable properties and methods, the defaults of which are
     // defined above
     Lightbox.templateUrl = this.templateUrl;
+    Lightbox.template = this.template;
     Lightbox.fullScreenMode = this.fullScreenMode;
     Lightbox.getImageUrl = this.getImageUrl;
     Lightbox.getImageCaption = this.getImageCaption;
@@ -327,17 +336,27 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
       Lightbox.images = newImages;
       Lightbox.setImage(newIndex);
 
+      var templateConfig = {};
+      if (Lightbox.template !== null){
+        templateConfig.template = Lightbox.template;
+      } else {
+        templateConfig.templateUrl = Lightbox.templateUrl;
+      }
+
       // store the modal instance so we can close it manually if we need to
-      Lightbox.modalInstance = $uibModal.open(angular.extend({
-        'templateUrl': Lightbox.templateUrl,
-        'controller': ['$scope', function ($scope) {
-          // $scope is the modal scope, a child of $rootScope
-          $scope.Lightbox = Lightbox;
-
-          Lightbox.keyboardNavEnabled = true;
-        }],
-        'windowClass': 'lightbox-modal'
-      }, modalParams || {}));
+      Lightbox.modalInstance = $uibModal.open(angular.extend(
+        templateConfig,
+        {
+          'controller': ['$scope', function ($scope) {
+            // $scope is the modal scope, a child of $rootScope
+            $scope.Lightbox = Lightbox;
+
+            Lightbox.keyboardNavEnabled = true;
+          }],
+          'windowClass': 'lightbox-modal'
+        },
+        modalParams || {}
+      ));
 
       // modal close handler
       Lightbox.modalInstance.result['finally'](function () {

src/lightbox-service.js

@@ -12,6 +12,14 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
    */
   this.templateUrl = 'lightbox.html';
 
+  /**
+   * Inline template string passed into `$uibModal.open()` . If set, overrides `templateUrl`.
+   * @type     {String}
+   * @name     template
+   * @memberOf bootstrapLightbox.Lightbox
+   */
+  this.template = null;
+
   /**
    * Whether images should be scaled to the maximum possible dimensions.
    * @type     {Boolean}
@@ -178,6 +186,7 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
     // set the configurable properties and methods, the defaults of which are
     // defined above
     Lightbox.templateUrl = this.templateUrl;
+    Lightbox.template = this.template;
     Lightbox.fullScreenMode = this.fullScreenMode;
     Lightbox.getImageUrl = this.getImageUrl;
     Lightbox.getImageCaption = this.getImageCaption;
@@ -254,17 +263,27 @@ angular.module('bootstrapLightbox').provider('Lightbox', function () {
       Lightbox.images = newImages;
       Lightbox.setImage(newIndex);
 
+      var templateConfig = {};
+      if (Lightbox.template !== null){
+        templateConfig.template = Lightbox.template;
+      } else {
+        templateConfig.templateUrl = Lightbox.templateUrl;
+      }
+
       // store the modal instance so we can close it manually if we need to
-      Lightbox.modalInstance = $uibModal.open(angular.extend({
-        'templateUrl': Lightbox.templateUrl,
-        'controller': ['$scope', function ($scope) {
-          // $scope is the modal scope, a child of $rootScope
-          $scope.Lightbox = Lightbox;
-
-          Lightbox.keyboardNavEnabled = true;
-        }],
-        'windowClass': 'lightbox-modal'
-      }, modalParams || {}));
+      Lightbox.modalInstance = $uibModal.open(angular.extend(
+        templateConfig,
+        {
+          'controller': ['$scope', function ($scope) {
+            // $scope is the modal scope, a child of $rootScope
+            $scope.Lightbox = Lightbox;
+
+            Lightbox.keyboardNavEnabled = true;
+          }],
+          'windowClass': 'lightbox-modal'
+        },
+        modalParams || {}
+      ));
 
       // modal close handler
       Lightbox.modalInstance.result['finally'](function () {