ng-viewer

An angular directive for viewer.js

Online demo

Usage

• add viewer.js and viewer.css to the project

• add ViewerDiretive to NgModules.declarations

• add [viewer] attribute to the html

example:

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'viewer-demo-basic',
   template: `
   <div id="galley" viewer>
       <ul class="pictures">
       <li><img data-original="./assets/showcase/images/demo/pictures/tibet-1.jpg" src="./assets/showcase/images/demo/pictures/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
       <li><img data-original="./assets/showcase/images/demo/pictures/tibet-2.jpg" src="./assets/showcase/images/demo/pictures/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
       <li><img data-original="./assets/showcase/images/demo/pictures/tibet-3.jpg" src="./assets/showcase/images/demo/pictures/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
       <li><img data-original="./assets/showcase/images/demo/pictures/tibet-4.jpg" src="./assets/showcase/images/demo/pictures/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
       <li><img data-original="./assets/showcase/images/demo/pictures/tibet-5.jpg" src="./assets/showcase/images/demo/pictures/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
       </ul>
   </div>
 `,
   styles: [`
       .pictures {
           margin: 0;
           padding: 0;
           height: 200px;
           list-style: none;
         }
       
       .pictures > li {
           float: left;
           width: 150px;
           height: 150px;
           margin: 0 -1px -1px 0;
           border: 1px solid transparent;
           overflow: hidden;
       }
       
       .pictures > li > img {
           width: 100%;
           cursor: -webkit-zoom-in;
           cursor: zoom-in;
       }
   `]
})
export class ViewerDemoBasicComponent {


}