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.