Плагин для увеличения и увеличения изображения

Question

Я пытаюсь реализовать что-то вроде увеличения и панорамирования изображений в Google Arts and Culture.

Посмотрите, например, здесь.

Я пытался работать с библиотекой ng2-image-viewer , но, похоже, не смог с ней работатьout.

Ниже приведен фрагмент, который я попробовал.

<app-image-viewer 
[images]="['https://images.nga.gov/en/web_images/niagara2.jpg']"
[loadOnInit]="true"
[idContainer]="'idOnHTML'">
</app-image-viewer>

Результат:

Как вы можетевидите, изображение выше ожидаемой области, а не надлежащих элементов управления, и не тот маленький прямоугольник, который дает нам миникарту.

Answer 1

Выполните следующие действия:

1- Чтобы установить эту библиотеку, запустите:

npm install iv-viewer
npm install ng2-image-viewer

2- в AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { ImageViewerModule } from 'ng2-image-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3 - Теперь просто добавьте этикоды в вашем файле angular-cli.json:

"styles": [
    "../node_modules/ng2-image-viewer/imageviewer.scss"
],

4- После импорта вашей библиотеки вы можете использовать ее компоненты, директивы и каналы в приложении Angular:

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

DEMO