全屏可滑动图像/视频查看器-ng-image-fullscreen-viewer

全屏可滑动图像/视频查看器-ng-image-fullscreen-viewer
插件名称 ng-image-fullscreen-viewer
发布时间 2020年5月1日
插件作者 sanjayV

angular响应式图像全屏查看器。还支持mp4视频网址。

特征!

  • 反应灵敏
  • 捕获手机和平板电脑上的滑动
  • 与Angular Universal兼容
  • 捕获用于灯箱图像移动的键盘上一个/下一个箭头键事件
  • 支持图像(jpeg,jpg,gif,png和Base64字符串),Youtube url和MP4视频(url和Base64字符串)

安装:

# NPM
$ npm install ng-image-fullscreen-view --save

使用:

1.将模块导入项目。

import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      NgImageFullscreenViewModule,
      ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2.将组件添加到您的应用程序模板。

<img *ngFor="let img of imageObject; let i = index" [src]="img.thumbImage || img.posterImage" (click)="showLightbox(i)" />
<ng-image-fullscreen-view
        [images]="imageObject"
        [imageIndex]="currentIndex"
        [show]="showFlag"
        (close)="closeEventHandler()">
</ng-image-fullscreen-view>

3.在app.component.ts中定义数据源。

currentIndex: any = -1;
showFlag: any = false;
imageObject: Array<object> = [{
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
    title: 'Hummingbirds are amazing creatures'
}, {
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg'
}, {
    video: 'https://youtu.be/tYa6OLQHrEc',
    posterImage: 'https://img.youtube.com/vi/tYa6OLQHrEc/hqdefault.jpg',
    title: 'Youtube example one with title.'
}, {
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
    title: 'Most beautiful birds in the world flying.'
}];
showLightbox(index) {
  this.currentIndex = index;
  this.showFlag = true;
}
closeEventHandler() {
  this.showFlag = false;
  this.currentIndex = -1;
}

API参考(可选):

名称 类型 数据类型 描述 默认值
images @Input Array 图片数组。
imageIndex @Input number 选定的图像索引。 0
show @Input boolean 图像全屏弹出可见标志。 false
infinite @Input boolean 如果值为true,则无限滑动图像。 false
videoAutoPlay @Input boolean 自动播放弹出视频 false
showVideoControls @Input boolean 如果值为 false 则隐藏MP4视频控件 true
direction @Input string 设置文字方向。您可以通过rtl / ltr / auto ltr
paginationShow @Input boolean 在底部显示分页。 false
animationSpeed @Input number 通过此用户可以设置滑块动画速度。最小值为0.1秒,最大值为5秒 1
arrowKeyMove @Input boolean 禁用滑块和弹出图像在箭头按键事件上的向左/向右移动,如果值为 false true
close @Output n/a 单击关闭时执行。 n/a
prevImage @Output n/a 单击上一个箭头时执行。 n/a
nextImage @Output n/a 单击下一个箭头时执行。 n/a