angular-bootstrap-lightbox
Version:
An AngularJS lightbox built using UI Bootstrap Modal.
279 lines (228 loc) • 14.1 kB
Markdown
<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)
<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.
**Kind**: static property of <code>[ImageLoader](#bootstrapLightbox.ImageLoader)</code>
**Returns**: <code>Promise</code> - A $q promise that resolves when the image has loaded
successfully.
| Param | Type |
| --- | --- |
| 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>
<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.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.
| Param | Type | Description |
| --- | --- | --- |
| 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.
| Param | Type | Description |
| --- | --- | --- |
| 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
dimensions if they conflict.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
**Returns**: <code>Object</code> - May optionally contain the properties `minWidth`,
`minHeight`, `maxWidth`, and `maxHeight`.
| Param | Type | Description |
| --- | --- | --- |
| 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,
are calculated.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
**Returns**: <code>Object</code> - Must contain the properties `width` and `height`.
| Param | Type | Description |
| --- | --- | --- |
| 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.
| Param | Type | Description |
| --- | --- | --- |
| 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
embedded with an external service like YouTube. By default, this is
determined by the url not ending in `.mp4`, `.ogg`, or `.webm`.
| Param | Type | Description |
| --- | --- | --- |
| 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
object, and besides it would be poor practice to alter the given
objects.
**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.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
**Returns**: <code>Object</code> - The created UI Bootstrap modal instance.
| Param | Type | Description |
| --- | --- | --- |
| newImages | <code>Array</code> | An array of images. Each image may be of any type. |
| newIndex | <code>Number</code> | The index in `newImages` to set as the current image. |
| 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.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
| Param | Type | Description |
| --- | --- | --- |
| 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.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
| Param | Type | Description |
| --- | --- | --- |
| 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
gets changed dynamically in some way while the lightbox is still
open.
**Kind**: static property of <code>[Lightbox](#bootstrapLightbox.Lightbox)</code>
| Param | Type | Description |
| --- | --- | --- |
| 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>`
element and its relevant parent elements within the modal.
**Kind**: static class of <code>[bootstrapLightbox](#bootstrapLightbox)</code>