Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lightbox service: support custom inline templates #82

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Lightbox service: support custom inline templates #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
141 changes: 89 additions & 52 deletions api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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.
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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.

Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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>`
Expand Down
Loading