Ghx LightBox

This is an Angular wrapper library for the Ghx LightBox. To use this library you should get familiar with the Ghx LightBox documentation as well since this documentation only explains details specific to this wrapper.

This documentation is for Angular 8 or newer. Documentation can be found from here.

Quick links

Example application | StackBlitz example | Ghx LightBox documentation

Installing and usage

npm install ghx-lightbox --save

Load the module for your app (with global configuration):

Providing the global configuration is optional and when used you should only provide the configuration in your root module.

import { GhxLightboxModule } from 'ghx-lightbox';


@NgModule({
  ...
  imports: [
    ...
    GhxLightboxModule
  ],
})

Use it in your HTML template (with custom configuration):

This library provides two ways to create a Ghx LightBox for your project, a component. Component tries to make the usage as simple as possible.

Single Lightbox usage

Ex. 1

<img src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>

Ex. 2

<span src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>Lorem ipsum...</span>

Multiple Lightbox usage

Ex. 1

<div ghxLightboxGroup>
  <img src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>
</div>

Ex. 2

<div ghxLightboxGroup>
  <span src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>Lorem ipsum...</span>
</div>

For more detailed documentation with all the supported events / options see the the Ghx LightBox documentation.