Gathering detailed insights and metrics for @jjbenitez/ng-image-fullscreen-view
Gathering detailed insights and metrics for @jjbenitez/ng-image-fullscreen-view
An Angular responsive image fullscreen viewer. Also support youtube and mp4 video urls.
Installations
npm install @jjbenitez/ng-image-fullscreen-viewDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.14.1
NPM Version
7.20.6
Releases
2
Languages
5
SCSS
TypeScript
HTML
JavaScript
CSS
SCSS (53.53%)
TypeScript (33.84%)
HTML (6.94%)
JavaScript (4.88%)
CSS (0.81%)
Developer
sanjayV
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
24 Stars
76 Commits
25 Forks
1 Watchers
10 Branches
4 Contributors
Updated on Dec 23, 2024
Maintainers
1
Package Meta Information
Latest Version
2.0.2
Package Id
@jjbenitez/ng-image-fullscreen-view@2.0.2
Unpacked Size
506.27 kB
Size
129.63 kB
File Count
29
NPM Version
7.20.6
Node Version
12.14.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Angular Image Fullscreen Viewer
An Angular responsive image fullscreen viewer. Also support youtube and mp4 video urls.
Features!
- Responsive
- captures swipes from phones and tablets
- Compatible with Angular Universal
- captures keyboard next/previous arrow key event for lightbox image move
- Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)
Working Demo: https://angular-bkosu5.stackblitz.io/
Code example: https://stackblitz.com/edit/angular-bkosu5
Installation
npm install ng-image-fullscreen-view
Setup :
Import module in your app.module.ts:
1import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view'; 2... 3 4@NgModule({ 5 declarations: [ 6 AppComponent 7 ], 8 imports: [ 9 NgImageFullscreenViewModule, 10 ... 11 ], 12 providers: [], 13 bootstrap: [AppComponent] 14}) 15 16export class AppModule { 17} 18
Add component in your template file :
1<img src="path-of-image.jpg" (click)="showLightbox(0)" /> 2 3<ng-image-fullscreen-view 4 [images]="imageObject" 5 [imageIndex]="selectedImageIndex" 6 [show]="showFlag" 7 (close)="closeEventHandler()"></ng-image-fullscreen-view>
Add closeEventHanler and showFlag conditions in your.component.ts :
1export class AppComponent { 2 showFlag: boolean = false; 3 selectedImageIndex: number = -1; 4 5 constructor () {} 6 7 ... 8 9 showLightbox(index) { 10 this.selectedImageIndex = index; 11 this.showFlag = true; 12 } 13 14 closeEventHandler() { 15 this.showFlag = false; 16 this.currentIndex = -1; 17 } 18 19 ... 20} 21
ImageObject format
1imageObject: Array<object> = [{ 2 image: 'assets/img/slider/1.jpg', 3 }, { 4 image: 'assets/img/slider/1.jpg', 5 alt: 'alt of image', // Optional 6 title: 'title of image' // Optional: Show image with description text 7 }, { 8 image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image 9 title: 'Image title', //Optional: You can use this key if want to show image with title 10 alt: 'Image alt' //Optional: You can use this key if want to show image with alt 11 } 12];
Image, Youtube and MP4 url's object format
1imageObject: Array<object> = [{ 2 video: 'https://youtu.be/6pxRHBw-k8M' // Youtube url 3 }, 4 { 5 video: 'assets/video/movie.mp4', // MP4 Video url 6 }, 7 { 8 video: 'assets/video/movie2.mp4', 9 title: 'Image title' // Video with title 10 }, 11 { 12 image: 'assets/img/slider/1.jpg', 13 alt: 'Image alt' 14 } 15 ... 16];
API Reference (optional) :
| 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 |
License
As Angular itself, this module is released under the permissive MIT license.
Your contributions and suggestions are always welcome :)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/6 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Reason
72 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Score
2.1
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More