Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/themyth92/angular2-lightbox

Lightbox2 port to use with angular2
https://github.com/themyth92/angular2-lightbox

angular2 lightbox2 photo-gallery

Last synced: about 1 month ago
JSON representation

Lightbox2 port to use with angular2

Awesome Lists containing this project

README 

        
[![Build Status](https://travis-ci.org/themyth92/angular2-lightbox.svg?branch=master)](https://travis-ci.org/themyth92/angular2-lightbox)



# Angular2 Lightbox

A [lighbox2](https://github.com/lokesh/lightbox2) implementation port to use with Angular2 without the need for jQuery



This module works with angular 2.x and 4.x

[demo](https://themyth92.com/project/angular2-lightbox/)



## NOTICE:

For angular >= 5 support. Please use [ngx-lightbox](https://github.com/themyth92/ngx-lightbox).



## Installation

`npm install --save angular2-lightbox`



Update your `system.config.js`



```javascript

{

  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`



```html



```



### Module:

Import `LightboxModule` from `angular2-lightbox`



```javascript

import { LightboxModule } from 'angular2-lightbox';



@NgModule({

  imports: [ LightboxModule ]

})

```



### Component

1. Markup



```html



  



```



2. Component method



```javascript

import { Lightbox } from 'angular2-lightbox';



export class AppComponent {

  private _album: Array = [];

  constructor(private _lightbox: Lightbox) {

    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.push(album);

    }

  }



  open(index: number): void {

    // open lightbox

    this._lightbox.open(this._albums, index);

  }

}



```



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.



3. Listen to lightbox event



You can listen to 3 events, which are either **CHANGE_PAGE**, **CLOSE** or **OPEN**.



```javascript

import { LightboxEvent, LIGHTBOX_EVENT } from 'angular2-lightbox';

import { Subscription } from 'rxjs/Subscription';



export class AppComponent {

  private _subscription: Subscription;

  constructor(private _lightboxEvent: LightboxEvent) {}

  open(index: number): void {

    // register your subscription and callback whe open lightbox is fired

    this._subscription = this._lightboxEvent.lightboxEvent$

      .subscribe(event => this._onReceivedEvent(event));

  }



  private _onReceivedEvent(event: any): void {

    // remember to unsubscribe the event when lightbox is closed

    if (event.id === LIGHTBOX_EVENT.CLOSE) {

      // event CLOSED is fired

      this._subscription.unsubscribe();

    }



    if (event.id === LIGHTBOX_EVENT.OPEN) {

      // event OPEN is fired

    }



    if (event.id === LIGHTBOX_EVENT.CHANGE_PAGE) {

      // event change page is fired

      console.log(event.data); // -> 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

1. Override default config

```javascript

import { LightboxConfig } from 'angular2-lightbox';



export class AppComponent {

  constructor(private _lighboxConfig: LightboxConfig) {

    // override default config

    _lighboxConfig.fadeDuration = 1;

  }

}

```



2. Set config in a specific opening window

```javascript

import { LightboxConfig, Lightbox } from 'angular2-lightbox';



export class AppComponent {

  constructor(private _lighboxConfig: LightboxConfig, private _lightbox: Lightbox) {}

  open(index: number) {

    // override the default config on second parameter

    this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });

  }

}

```



## License



MIT



## Donation

Buy me a beer if you like



BTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct



ETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72



NEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS