ng-image-fullscreen-view

npmpackage.info

Gathering detailed insights and metrics for ng-image-fullscreen-view

Other packages similar to ng-image-fullscreen-view

ngx-image-fullscreen-viewer

3.0.0

Angular image fullscreen viewer. An updated version of ng-image-fullscreen-view that uses standalone components + bugfixes.

@jjbenitez/ng-image-fullscreen-view

2.0.2

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.

@dntlab/ng-image-fullscreen-view

3.0.3-dntl.1

@aloysius-software-factory/ng-image-fullscreen-view

13.0.0

Gathering detailed insights and metrics for ng-image-fullscreen-view

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)

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

Name

Type

Data Type

Description

Default

images

@Input

Array

Images array.

imageIndex

@Input

number

Selected image index.

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.

arrowKeyMove

@Input

boolean

Disable slider and popup image left/right move on arrow key press event, if value is false

true

@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

Other packages similar to ng-image-fullscreen-view

Other packages similar to ng-image-fullscreen-view

Installations

Developer Guide

No

CommonJS

15.14.0

7.7.6

Pull Requests

9

46

10

27

Issues

10

11

1

Releases

Languages

Developer

sanjayV

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Angular Image Fullscreen Viewer

Features!

Working Demo: https://angular-bkosu5.stackblitz.io/

Code example: https://stackblitz.com/edit/angular-bkosu5

Installation

Setup :

API Reference (optional) :

License

10

10

3

0

0

0

0

0

0

0

2.1

/10