
Research
PyPI Package Disguised as Instagram Growth Tool Harvests User Credentials
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
github.com/themyth92/angular2-lightbox
A lighbox2 implementation port to use with Angular2 without the need for jQuery
This module works with angular 2.x demo
npm install --save angular2-lightbox
Update your system.config.js
{
map: {
'angular2-lightbox': 'node_modules/angular2-lightbox'
},
packages: {
'angular2-lightbox': {
main: './index.js',
defaultExtension: 'js'
}
}
}
Include modified version of lightbox.css
in your index.html
<link rel="stylesheet" href="./node_modules/angular2-lightbox/lightbox.css">
Import LightboxModule
from angular2-lightbox
import { LightboxModule } from 'angular2-lightbox';
@NgModule({
imports: [ LightboxModule ]
})
<div *ngFor="let image of _albums; let i=index">
<img [src]="image.thumb" (click)="open(i)"/>
</div>
import { Lightbox } from 'angular2-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);
}
}
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 'angular2-lightbox';
import { Subscription } from 'rxjs/Subscription';
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. |
NOTE: You can either override default config or during a specific opening window
import { LightboxConfig } from 'angular2-lightbox';
export class AppComponent {
constructor(private _lighboxConfig: LightboxConfig) {
// override default config
_lighboxConfig.fadeDuration = 1;
}
}
import { LightboxConfig, Lightbox } from 'angular2-lightbox';
export class AppComponent {
constructor(private _lighboxConfig: LightboxConfig, private _lightbox: Lightbox) {}
open(index: number) {
// override the default config on second parameter
this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });
}
}
MIT
FAQs
Unknown package
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.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.
Security News
Research
Socket uncovered two npm packages that register hidden HTTP endpoints to delete all files on command.