Angular2 Lightbox
A lighbox2 implementation port to use with Angular2 without the need for jQuery
This module works with angular 2.x and 4.x demo
NOTICE:
For angular >= 5 support. Please use ngx-lightbox.
Installation
npm install --save angular2-lightbox
Update your system.config.js
map: 'angular2-lightbox': 'node_modules/angular2-lightbox' packages: 'angular2-lightbox': main: './index.js' defaultExtension: 'js'
Usage
CSS
Include modified version of lightbox.css
in your index.html
Module:
Import LightboxModule
from angular2-lightbox
; @
Component
- Markup
- Component method
; private _album: Array = ; { for let i = 1; i <= 4; i++ const src = 'demo/img/image' + i + '.jpg'; const caption = 'Image ' + i + ' caption here'; const thumb = 'demo/img/image' + i + '-thumb.jpg'; const album = src: src caption: caption thumb: thumb ; this_albums; } : void // open lightbox this_lightbox;
Each object
of album
array inside your component 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. It is being used inside your component markup so this properties depends on your naming. |
- Listen to lightbox event
You can listen to 3 events, which are either CHANGE_PAGE, CLOSE or OPEN.
;; private _subscription: Subscription; {} : void // register your subscription and callback whe open lightbox is fired this_subscription = this_lightboxEventlightboxEvent$ ; private : void // remember to unsubscribe the event when lightbox is closed if eventid === LIGHTBOX_EVENTCLOSE // event CLOSED is fired this_subscription; if eventid === LIGHTBOX_EVENTOPEN // event OPEN is fired if eventid === LIGHTBOX_EVENTCHANGE_PAGE // event change page is fired console; // -> image index that lightbox is switched to
Lightbox options
Available options based on lightbox2 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. |
disableKeyboardNav | false | Determine whether to disable navigation using keyboard event. |
disableScrolling | false | If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body. |
centerVertically | false | If true, images will be centered vertically to the screen. |
NOTE: You can either override default config or during a specific opening window
- Override default config
; { // override default config _lighboxConfigfadeDuration = 1; }
- Set config in a specific opening window
; {} { // override the default config on second parameter this_lightbox; }
License
MIT
Donation
Buy me a beer if you like
BTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct
ETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72
NEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS