项目作者: web-aid-kit

项目描述 :
Probably the best Angular 4+ modal and inline image gallery. Angular upgrade for ng-image-gallery.
高级语言: TypeScript
项目地址: git://github.com/web-aid-kit/ngx-image-gallery.git
创建时间: 2017-11-05T16:47:06Z
项目社区:https://github.com/web-aid-kit/ngx-image-gallery

开源协议:

下载


This project is no longer maintained. Please consider other image galleries.


ngx-image-gallery

Probably the best Angular 4+ modal and inline image gallery. Angular upgrade for ng-image-gallery.

preview

npm
npm
David
preview

Prerequisites

  • Hammerjs (required for swipe)
    1. npm i -S hammerjs lodash

Then import hammerjs into your project (tip: in you main.ts file), e.g:

  1. import 'hammerjs';
  2. import { enableProdMode } from '@angular/core';
  3. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. import { AppModule } from './app/app.module';
  5. import { environment } from './environments/environment';
  6. if (environment.production) {
  7. enableProdMode();
  8. }
  9. document.addEventListener('DOMContentLoaded', () => {
  10. platformBrowserDynamic().bootstrapModule(AppModule)
  11. .catch(err => console.log(err));
  12. });

Install

  1. npm install --save @web-aid-kit/ngx-image-gallery

Import

  1. import { NgxImageGalleryModule } from '@web-aid-kit/ngx-image-gallery';
  2. @NgModule({
  3. ...,
  4. imports: [
  5. NgxImageGalleryModule,
  6. ...
  7. ]
  8. })
  9. export class AppModule { }

Use

  1. // app.component.html
  2. <ngx-image-gallery
  3. [images]="images"
  4. [conf]="conf"
  5. (onOpen)="galleryOpened($event)"
  6. (onClose)="galleryClosed()"
  7. (onImageClicked)="galleryImageClicked($event)"
  8. (onImageChange)="galleryImageChanged($event)"
  9. (onDelete)="deleteImage($event)"
  10. ></ngx-image-gallery>

Configure

  1. import { Component, OnInit, ViewChild } from '@angular/core';
  2. import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from '@web-aid-kit/ngx-image-gallery';
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.scss']
  7. })
  8. export class AppComponent implements OnInit {
  9. // get reference to gallery component
  10. @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent;
  11. // gallery configuration
  12. conf: GALLERY_CONF = {
  13. imageOffset: '0px',
  14. showDeleteControl: false,
  15. showImageTitle: false,
  16. };
  17. // gallery images
  18. images: GALLERY_IMAGE[] = [
  19. {
  20. url: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=1260",
  21. altText: 'woman-in-black-blazer-holding-blue-cup',
  22. title: 'woman-in-black-blazer-holding-blue-cup',
  23. thumbnailUrl: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=60"
  24. },
  25. {
  26. url: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=1260",
  27. altText: 'two-woman-standing-on-the-ground-and-staring-at-the-mountain',
  28. extUrl: 'https://www.pexels.com/photo/two-woman-standing-on-the-ground-and-staring-at-the-mountain-669006/',
  29. thumbnailUrl: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=60"
  30. },
  31. ];
  32. constructor(){}
  33. ngOnInit() {}
  34. // METHODS
  35. // open gallery
  36. openGallery(index: number = 0) {
  37. this.ngxImageGallery.open(index);
  38. }
  39. // close gallery
  40. closeGallery() {
  41. this.ngxImageGallery.close();
  42. }
  43. // set new active(visible) image in gallery
  44. newImage(index: number = 0) {
  45. this.ngxImageGallery.setActiveImage(index);
  46. }
  47. // next image in gallery
  48. nextImage(index: number = 0) {
  49. this.ngxImageGallery.next();
  50. }
  51. // prev image in gallery
  52. prevImage(index: number = 0) {
  53. this.ngxImageGallery.prev();
  54. }
  55. /**************************************************/
  56. // EVENTS
  57. // callback on gallery opened
  58. galleryOpened(index) {
  59. console.info('Gallery opened at index ', index);
  60. }
  61. // callback on gallery closed
  62. galleryClosed() {
  63. console.info('Gallery closed.');
  64. }
  65. // callback on gallery image clicked
  66. galleryImageClicked(index) {
  67. console.info('Gallery image clicked with index ', index);
  68. }
  69. // callback on gallery image changed
  70. galleryImageChanged(index) {
  71. console.info('Gallery image changed to index ', index);
  72. }
  73. // callback on user clicked delete button
  74. deleteImage(index) {
  75. console.info('Delete image at index ', index);
  76. }
  77. }

Interfaces

  1. // gallery configuration
  2. export interface GALLERY_CONF {
  3. imageBorderRadius?: string; // css border radius of image (default 3px)
  4. imageOffset?: string; // add gap between image and it's container (default 20px)
  5. imagePointer? :boolean; // show a pointer on image, should be true when handling onImageClick event (default false)
  6. showDeleteControl?: boolean; // show image delete icon (default false)
  7. showCloseControl?: boolean; // show gallery close icon (default true)
  8. showExtUrlControl?: boolean; // show image external url icon (default true)
  9. showImageTitle?: boolean; // show image title text (default true)
  10. showThumbnails?: boolean; // show thumbnails (default true)
  11. closeOnEsc?: boolean; // close gallery on `Esc` button press (default true)
  12. reactToKeyboard?: boolean; // change image on keyboard arrow press (default true)
  13. reactToMouseWheel?: boolean; // change image on mouse wheel scroll (default true)
  14. reactToRightClick?: boolean; // disable right click on gallery (default false)
  15. thumbnailSize?: number; // thumbnail size (default 30)
  16. backdropColor?: string; // gallery backdrop (background) color (default rgba(13,13,14,0.85))
  17. inline?: boolean; // make gallery inline (default false)
  18. showArrows?: boolean; // show prev / next arrows (default true)
  19. }
  20. // gallery image
  21. export interface GALLERY_IMAGE {
  22. url: string; // url of the image
  23. thumbnailUrl?: string; // thumbnail url (recommended), if not present, gallery will use `url` property to get thumbnail image.
  24. altText?: string; // alt text for image
  25. title?: string; // title of the image
  26. extUrl?: string; // external url of image
  27. extUrlTarget?: string; // external url target e.g. '_blank', '_self' etc.
  28. }

All properties ending with ? are optional.

Make gallery inline

You can make gallery inline like a carousel by setting conf.inline to true but make sure to change conf.backdropColor as well if you need white backdrop color. Also width and height of the gallery can be adjusted by manually applying css styles with !important flag on gallery element.

Dynamic Update

You can update gallery images images and gallery configuration conf anytime you want even when gallery is opened but due to Angular’s change detection restrictions you must assign these variable to new value instead of changing internal properties as mentioned below.

  1. // change images
  2. this.images = this.images.concat([...]);
  3. // change conf
  4. this.conf = {...};