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.
Example application | StackBlitz example | Ghx LightBox documentation
npm install ghx-lightbox --save
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
],
})
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
<img src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>
<span src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>Lorem ipsum...</span>
Multiple Lightbox usage
<div ghxLightboxGroup>
<img src="<Imgage Path>" alt="<Lightbox Caption>" ghxLightbox>
</div>
<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.