Ionic-img-viewer showcase

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
    <script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
   
    <script src="https://npmcdn.com/ionic-angular@2.0.0-beta.11/bundles/ionic.system.js"></script>
     <script src="config.js"></script>
    <link href="https://npmcdn.com/ionic-angular@2.0.0-beta.11/bundles/ionic.css" rel="stylesheet">
  </head>

  <body>
    <!-- this Ionic's root component and where the app will load -->
    <ion-app></ion-app>
    
    <script>
      System.import('app.ts')
    </script>
  </body>

</html>

import { NavController } from 'ionic-angular';
import { Component } from "@angular/core";
import { ImageViewerDirective } from 'ionic-img-viewer';


@Component({
  templateUrl:"home.html",
  directives: [ImageViewerDirective]
})
export class HomePage {
  
  greeting: string;
  
  constructor(private nav: NavController) {
		
	}


}

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
    'ionic-img-viewer'          : 'https://npmcdn.com/ionic-img-viewer@1.0.1'
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ionic-img-viewer'          : { main: 'ionic-img-viewer.js', defaultExtension: 'js' }
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/router',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade'
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });
  
  map['@angular/forms'] = 'https://npmcdn.com/@angular/forms@0.2.0';
  packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };
  
  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages,
    paths: {
      'ionic-angular': 'ionic-angular/index' 
    }
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular';
import { HomePage } from './home.ts';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = HomePage;
  }
}

ionicBootstrap(MyApp);

<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic-img-viewer
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header">
    <h1>Ionic 2 image viewer</h1>
    <ul>
      <li>Tap on the pic to see it fullscreen</li>
      <li>Slide up/down to close the view</li>
      <li>Tap on the navigation arrow to close the view</li>
      <li>Double tap on the pic when open to zoom</li>
    </ul>
    
    <img src="https://images.unsplash.com/photo-1468743428993-661b9309fa2c?dpr=1&auto=format&crop=entropy&fit=crop&w=900&h=600&q=80&cs=tinysrgb" imageViewer />
</ion-content>