Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
teqnia-ng-image-fullscreen-view-1
Advanced tools
Readme
An Angular responsive image fullscreen viewer. Also support youtube and mp4 video urls.
npm install ng-image-fullscreen-view
Import module in your app.module.ts
:
import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
NgImageFullscreenViewModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Add component in your template file :
<img src="path-of-image.jpg" (click)="showLightbox(0)" />
<ng-image-fullscreen-view
[images]="imageObject"
[imageIndex]="selectedImageIndex"
[show]="showFlag"
(close)="closeEventHandler()"></ng-image-fullscreen-view>
Add closeEventHanler and showFlag conditions in your.component.ts
:
export class AppComponent {
showFlag: boolean = false;
selectedImageIndex: number = -1;
constructor () {}
...
showLightbox(index) {
this.selectedImageIndex = index;
this.showFlag = true;
}
closeEventHandler() {
this.showFlag = false;
this.currentIndex = -1;
}
...
}
ImageObject format
imageObject: Array<object> = [{
image: 'assets/img/slider/1.jpg',
}, {
image: 'assets/img/slider/1.jpg',
alt: 'alt of image', // Optional
title: 'title of image' // Optional: Show image with description text
}, {
image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
title: 'Image title', //Optional: You can use this key if want to show image with title
alt: 'Image alt' //Optional: You can use this key if want to show image with alt
}
];
Image, Youtube and MP4 url's object format
imageObject: Array<object> = [{
video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url
},
{
video: 'assets/video/movie.mp4', // MP4 Video url
},
{
video: 'assets/video/movie2.mp4',
title: 'Image title' // Video with title
},
{
image: 'assets/img/slider/1.jpg',
alt: 'Image alt'
}
...
];
Name | Type | Data Type | Description | Default |
---|---|---|---|---|
images | @Input | Array | Images array. | |
imageIndex | @Input | number | Selected image index. | 0 |
show | @Input | boolean | Image fullscreen popup visiable flag. | false |
infinite | @Input | boolean | Infinite sliding images if value is true. | false |
videoAutoPlay | @Input | boolean | Auto play popup video | false |
showVideoControls | @Input | boolean | Hide Youtube and MP4 video controls if value is false | true |
direction | @Input | string | Set text direction. You can pass rtl / ltr / auto | ltr |
paginationShow | @Input | boolean | Display pagination at bottom. | false |
animationSpeed | @Input | number | By this user can set slider animation speed. Minimum value is 0.1 second and Maximum value is 5 second. | 1 |
arrowKeyMove | @Input | boolean | Disable slider and popup image left/right move on arrow key press event, if value is false | true |
close | @Output | n/a | Executes when click on close. | n/a |
prevImage | @Output | n/a | Executes when click on previous arrow. | n/a |
nextImage | @Output | n/a | Executes when click on next arrow. | n/a |
As Angular itself, this module is released under the permissive MIT license.
Your contributions and suggestions are always welcome :)
FAQs
An Angular responsive image full screen viewer. Also support youtube and mp4 video urls, captures swipes from phones and tablets, Compatible with Angular Universal, Captures keyboard next/previous arrow.
The npm package teqnia-ng-image-fullscreen-view-1 receives a total of 0 weekly downloads. As such, teqnia-ng-image-fullscreen-view-1 popularity was classified as not popular.
We found that teqnia-ng-image-fullscreen-view-1 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.