Simple, lightweight Angular image lightbox library with gestures support & no dependencies
npm install just-lightboxts
import {JustLightboxModule} from 'just-lightbox';
@NgModule({
imports: [JustLightboxModule.forRoot()]
})
`
Usage
Basic usage. Lightbox opens src image
`html
`
Different thumb and full images
`html
`
It works with a hyperlinks
`html
`
Call from code
`ts
import { JustLightboxService } from 'just-lightbox';
constructor(private lightbox: JustLightboxService) {}
open() {
this.lightbox.open({
describedby: 'aria-describedby',
labelledby: 'araia-labelledby',
imageSrc: 'path-to-full-image',
});
}
`
Configuration
`ts
JustLightboxModule.forRoot({
// Image paddings in px
containerOffset: {
vertical: 20, // Default: 0
horizontal: 30, // Default: 0
},
gesturesEnabled: true, // Pinch zoom & pan gestures. Default: true
wheelEnabled: true, // Wheel/trackpad zoom & pan. Default: false
wheelSensitivity: {
zoom: 10, // Default: 10
pan: 5, // Default: 5
},
});
`
Customization
Lightbox uses css variables
`css
--j-lightbox__z-index: 10000000;
--j-lightbox__overlay__background-color: rgba(0, 0, 0, 0.9);
--j-lightbox__loader__color--primary: rgba(255, 255, 255, 1);
--j-lightbox__loader__color--secondary: rgba(255, 255, 255, 0.2);
--j-lightbox__loader__animation-duration: 1.1s;
--j-lightbox__overlay__cursor: zoom-out;
``