Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
ngx-lightbox
Advanced tools
A lightbox2 implementation port to use with new Angular without the need for jQuery
npm install ngx-lightbox@1.2.0
npm install ngx-lightbox@2.0.0
npm install --save ngx-lightbox
Update your angular.json
{
"styles": [
"./node_modules/ngx-lightbox/lightbox.css",
...
],
}
Import LightboxModule
from ngx-lightbox
import { LightboxModule } from 'ngx-lightbox';
@NgModule({
imports: [ LightboxModule ]
})
<div *ngFor="let image of _albums; let i=index">
<img [src]="image.thumb" (click)="open(i)" />
</div>
import { Lightbox } from 'ngx-lightbox';
export class AppComponent {
private _album: Array = [];
constructor(private _lightbox: Lightbox) {
for (let i = 1; i <= 4; i++) {
const src = 'demo/img/image' + i + '.jpg';
const caption = 'Image ' + i + ' caption here';
const thumb = 'demo/img/image' + i + '-thumb.jpg';
const album = {
src: src,
caption: caption,
thumb: thumb
};
this._albums.push(album);
}
}
open(index: number): void {
// open lightbox
this._lightbox.open(this._albums, index);
}
close(): void {
// close lightbox programmatically
this._lightbox.close();
}
}
Each object
of album
array inside your component may contains 3 properties :
Properties | Requirement | Description |
---|---|---|
src | Required | The source image to your thumbnail that you want to with use lightbox when user click on thumbnail image |
caption | Optional | Your caption corresponding with your image |
thumb | Optional | Source of your thumbnail. It is being used inside your component markup so this properties depends on your naming. |
You can listen to 3 events, which are either CHANGE_PAGE, CLOSE or OPEN.
import { LightboxEvent, LIGHTBOX_EVENT } from 'ngx-lightbox';
import { Subscription } from 'rxjs';
export class AppComponent {
private _subscription: Subscription;
constructor(private _lightboxEvent: LightboxEvent) {}
open(index: number): void {
// register your subscription and callback whe open lightbox is fired
this._subscription = this._lightboxEvent.lightboxEvent$
.subscribe(event => this._onReceivedEvent(event));
}
private _onReceivedEvent(event: any): void {
// remember to unsubscribe the event when lightbox is closed
if (event.id === LIGHTBOX_EVENT.CLOSE) {
// event CLOSED is fired
this._subscription.unsubscribe();
}
if (event.id === LIGHTBOX_EVENT.OPEN) {
// event OPEN is fired
}
if (event.id === LIGHTBOX_EVENT.CHANGE_PAGE) {
// event change page is fired
console.log(event.data); // -> image index that lightbox is switched to
}
}
}
Available options based on lightbox2 options
Properties | Default | Description |
---|---|---|
fadeDuration | 0.7 seconds | duration starting when the src image is loaded to fully appear onto screen. |
resizeDuration | 0.5 seconds | duration starting when Lightbox container change its dimension from a default/previous image to the current image when the current image is loaded. |
fitImageInViewPort | true | Determine whether lightbox will use the natural image width/height or change the image width/height to fit the view of current window. Change this option to true to prevent problem when image too big compare to browser windows. |
positionFromTop | 20 px | The position of lightbox from the top of window browser |
showImageNumberLabel | false | Determine whether to show the image number to user. The default text shown is Image IMAGE_NUMBER of ALBUM_LENGTH |
alwaysShowNavOnTouchDevices | false | Determine whether to show left/right arrow to user on Touch devices. |
wrapAround | false | Determine whether to move to the start of the album when user reaches the end of album and vice versa. Set it to true to enable this feature. |
disableKeyboardNav | false | Determine whether to disable navigation using keyboard event. |
disableScrolling | false | If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body. |
centerVertically | false | If true, images will be centered vertically to the screen. |
albumLabel | "Image %1 of %2" | The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set. |
enableTransition | true | Transition animation between images will be disabled if this flag set to false |
showZoom | false | Zoom Buttons will be shown if this flag set to true |
showRotate | false | Rotate Buttons will be shown if this flag set to true |
showDownloadButton | false | Download button will be shown if this flag set to true |
containerElementResolver | () => document.body | Resolves the element that will contain the lightbox |
NOTE: You can either override default config or during a specific opening window
import { LightboxConfig } from 'ngx-lightbox';
export class AppComponent {
constructor(private _lightboxConfig: LightboxConfig) {
// override default config
_lightboxConfig.fadeDuration = 1;
}
}
import { LightboxConfig, Lightbox } from 'ngx-lightbox';
export class AppComponent {
constructor(private _lightboxConfig: LightboxConfig, private _lightbox: Lightbox) {}
open(index: number) {
// override the default config on second parameter
this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });
}
}
If you want to use any other parent element than your <body>
, please override the containerElementResolver
property of your LightboxConfig
.
This can be used, e.g. if you are opening the lightbox from within a Shadow DOM based web component.
export class MyLightBoxTrigger {
constructor(
private _lightbox: Lightbox,
private _lighboxConfig: LightboxConfig,
) {
_lighboxConfig.containerElementResolver = (doc: Document) => doc.getElementById('my-lightbox-host');
}
open(index: number): void {
this._lightbox.open(this.images, index); // will put the lightbox child into e.g. <div id="my-lightbox-host"></div>
}
This project works with universal out of the box with no additional configuration.
MIT
Buy me a beer if you like
BTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct
ETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72
NEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS
FAQs
A port >= angular5 for lightbox2
The npm package ngx-lightbox receives a total of 12,662 weekly downloads. As such, ngx-lightbox popularity was classified as popular.
We found that ngx-lightbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.