Just Lightbox

Simple, lightweight Angular image lightbox library with gestures support & no dependencies

Demo

View Demo

Installation

Import module:

import {JustLightboxModule} from 'just-lightbox';

@NgModule({
    imports: [JustLightboxModule.forRoot()]
})

Usage

Basic usage. Lightbox opens src image

<img src="path-to-full-image" jLightbox />

Different thumb and full images

<img src="path-to-thumbnail" jLightbox="path-to-full-image" />

It works with a hyperlinks

<a href="path-to-full-image" jLightbox>
    <img src="path-to-thumbnail" />
</a>

Call from code

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

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

--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;