GithubHelp home page GithubHelp logo

riron / ionic-img-viewer Goto Github PK

View Code? Open in Web Editor NEW
283.0 20.0 118.0 2.88 MB

Ionic 2+ component providing a Twitter inspired experience to visualize pictures.

License: MIT License

TypeScript 84.84% CSS 4.52% JavaScript 10.63%
ionic2 ionic-framework angular cordova viewer

ionic-img-viewer's People

Contributors

cupidi avatar diogoqueiros avatar dmastag avatar fourcube avatar leoruhland avatar markchrislevy avatar riron avatar shadowalker89 avatar sharkoz avatar theduc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic-img-viewer's Issues

Not working on ionic 3.3.0/angular 4.1.2

Sofware version:

  • Ionic : 3.3.0
  • Angular: 4.1.2

I can't make this plugin work. Touch the image and nothing happen.
I'm using it like this:

.ts
import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})

.html

<ion-header id="header-controls"><ion-navbar> <ion-title>
   <span>{{device.name}}</span>
</ion-title> </ion-navbar></ion-header>

<ion-content class="card-background-page" id="content-page">
  <img [src]="'https://url-image.jpg'" imageViewer />
</ion-content>

*It's kind of confusing that the plunker demo you provide and the instructions are different, using IonicImageViewerModule and ImageViewerDirective to be imported.
Thank you!

[BUG] Tap on pic & it gives error.

Issue

When I tap on a image it now throws this.plt.registerListener is not a function

Versions

Ionic Framework: 2.0.0
Ionic Native: 2.2.11
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1

Update

Seems like 1.2.1 fixed this. I didn't see the changelog updated so I had to go look. LOL Thanks as always for your work! @Riron

Production build fails

Production build fails with error below :


[19:48:09]  ngc started ...
[19:48:34]  ionic-app-script task: "build"
[19:48:34]  Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function
            calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
            resolving symbol NgModule in
            C:/xampp/htdocs/ionic2/ionicProject/node_modules/ionic-img-viewer/node_modules/@angular/core/src/me
tadata/ng_module.d.ts,

Dependencies :-


  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "ionic-angular": "^2.3.0",
    "ionic-image-loader": "^1.3.0",
    "ionic-img-viewer": "^1.3.2",
    "ionic-native": "^2.5.1",
    "ionicons": "3.0.0",
    "ng2-img-fallback": "^0.2.1",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.1.4",
    "typescript": "2.0.9"
  },

Thanks !

License

Could you, please, add a license?

Don't seems to work

Hi there,
It looks great, and I really want to use it.
Unfortunatly, when I import it, my app do not like it at all:
main.js:28334Uncaught Error: Unexpected value 'IonicImageViewerModule' imported by the module 'AppModule'(โ€ฆ)

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.37-5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.2.0
Xcode version: Not installed

I hope you can help me !

Cheers

[Feature] Add Support to Sliders

Hi, what a great plugin! The feel of user viewing the images is just stunning!

I was wondering maybe we can improve it adding support for sliders, if the user swipes left/right then show another image, what do you think? Is that possible?

Type 'any' is not a constructor function type

node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts

export declare class ImageViewerTransitionGesture extends PanGesture {
private component;
}

ionic2 v: 2.2.1

Thank you so much.

Unexpected value 'IonicImageViewerModule' when build with --prod

As already discussed here #9, this issue still is present when using --prod. With --dev it works, but it should also work with --prod.

Error:
Unexpected value 'IonicImageViewerModule' in path/node_modules/ionic-img-viewer/dist/src/module.d.ts imported by the module 'AppModule'

Setup Info:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v7.7.3
Xcode version: Xcode 8.2.1 Build version 8C1002

Styles are not included

First of all thanks for the great component!

Just wanted to mention that the styles (.css neither .scss) are included in the package.
Have I missed something or this is a "bug"?
Version 1.1.7

Everything is working OK when I integrated the scss from the src folder

Error When Importing

Hi
I follow the installation instruction and I got this error when trying to import it can you help to solve this issue.
my project is ionic 2, the import statement is
import { IonicImageViewerModule } from 'ionic-img-viewer';
the Error that I got.

Typescript Error
Type 'any' is not a constructor function type.
node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts
import { DomController } from 'ionic-angular';
export declare class ImageViewerTransitionGesture extends PanGesture {
private component;

Installation warning

Hi guys,
Installation shows the following warnings:

npm install --save ionic-img-viewer ionic-hello-world@ C:\projects\ionic\flannery +-- UNMET PEER DEPENDENCY [email protected] -- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of ionic-angular@~3.1.0 but none was installed.`

When I run my app I receive this error:

Typescript Error
Type 'any' is not a constructor function type.
...nery/node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts
import { DomController } from 'ionic-angular';
export declare class ImageViewerTransitionGesture extends PanGesture {
private component;

Could you please help me?

Thanks

The plugin doesn't works with Android 4.4 version.

Hi guys, i have a little problem, its that i have been testing the plugin with Android 4.4 version and the double tap in the image to open the zoom doesn't works, but with the 6.0 android version it works ok.

[enhancement] Android back button

Is it possible to handle the android back button? The idea is to keep the same behavior as the top left arrow.
Thanks for this great plugin!

Make it compatible with Ionic 2.0.0

I assume latest version(1.2.1) is not compatible with Ionic 2.0.0 and later, please correct me if I am wrong.

So any plan to make it compatible (any time soon)?

Thank you for the great component by the way! ๐Ÿ‘

p.s. According to README file we need to add ImageViewerDirective to @Component with directives attribute, but there is no directives attribute in @Component any more, is there any other way to use current directive? (in ionic 2.0.0)

EXCEPTION: ele.addEventListener is not a function

Hi, i have this issue

error_handler.js:47 EXCEPTION: ele.addEventListener is not a function
ErrorHandler.handleError @ error_handler.js:47
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
IonicErrorHandler.handleError @ ionic-error-handler.js:56
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
t.handleError @ polyfills.js:3
e.runTask @ polyfills.js:3
invoke @ polyfills.js:3
error_handler.js:53 TypeError: ele.addEventListener is not a function
at listenEvent (ui-event-manager.js:196)
at new PointerEvents (ui-event-manager.js:48)
at UIEventManager.pointerEvents (ui-event-manager.js:163)
at ImageViewerGesture.PanGesture.listen (drag-gesture.js:46)
at new ImageViewerGesture (image-viewer-gesture.js:27)
at image-viewer.component.js:32
at t.invoke (polyfills.js:3)
at e.run (polyfills.js:3)
at NgZone.runOutsideAngular (ng_zone.js:144)
at ImageViewerComponent.ngOnInit (image-viewer.component.js:32)

Production build

when i try to build in production mode a get this error:

> ionic build android --prod

ionic-app-scripts build "--prod"

[22:22:55] ionic-app-scripts 1.1.3
[22:22:55] build prod started ...
[22:22:55] clean started ...
[22:22:55] clean finished in 2 ms
[22:22:55] copy started ...
[22:22:55] ngc started ...
can't resolve module /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts from /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[22:22:59] build prod failed: can't find symbol KeyRegistry exported from module
/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[22:22:59] ionic-app-script task: "build"
[22:22:59] Error: can't find symbol KeyRegistry exported from module
/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
at ReflectorHost.findDeclaration (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/reflector_host.js:173:23)
at /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:137:46
at Array.forEach (native)
at extractProgramSymbols (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:120:10)
at CodeGenerator.codegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@angular/compiler-cli/src/codegen.js:57:29)
at Object.runCodegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/codegen/codegen-ng22.js:15:26)
at Object.doCodegen (/Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/codegen.js:6:31)
at /Users/user/Develop/vvCremaIonic/ionic2/vvApp/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:41:30

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v7.7.1
npm ERR! npm v4.3.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vvapp@ ionic:build: ionic-app-scripts build "--prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vvapp@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vvapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vvapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vvapp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/user/.npm/_logs/2017-03-23T21_22_59_438Z-debug.log

Error when clicking on image with upgrading to RC 4

When I click on a image I get Error in :0:0 caused by: this.plt.registerListener is not a function this started happening when upgrading to RC 4.

Ionic Framework: ^2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1

ionic build --prod or --aot Error: No provider for Config!

When I run ionic build --prod or ionic build --aot it throws Error: No provider for Config!.

This is the line that it's referring to import * as import129 from 'ionic-img-viewer/node_modules/ionic-angular/config/config';

import128.registerCustomTransitions(this.parent.get(import129.Config)),

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4

[BUG] In iOS the Status Bar overlapps Back button

Hello,

Nice work.

I'm testing it on iOS and I'm seeing that the Back button is partially overlapped with the status bar, so only half of the button is clickable (half of height).

On the following image you can see the overlapping.

screen shot 2017-01-30 at 14 11 05

Thanks!

ionic rc4 not work!

i can't resolve the error. i need you help me~~

My system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.7.1
Xcode version: Xcode 8.2.1 Build version 8C1002

Error message:
TypeError: ele.addEventListener is not a function
at listenEvent (ui-event-manager.js:196)
at new PointerEvents (ui-event-manager.js:48)
at UIEventManager.pointerEvents (ui-event-manager.js:163)
at ImageViewerTransitionGesture.PanGesture.listen (drag-gesture.js:46)
at new ImageViewerTransitionGesture (image-viewer-transition-gesture.js:28)
at image-viewer.component.js:28
at t.invoke (polyfills.js:3)
at e.run (polyfills.js:3)
at NgZone.runOutsideAngular (ng_zone.js:144)
at ImageViewerComponent.ngOnInit (image-viewer.component.js:28)

waiting for you~ thank you~

Not able to add in ionic2.0

How to use this directive. Added in declarations: [...] but not ale ti get on respective page ?

If you have any demo code or suggestion . Please share.

Ionic 2 RC 2 Bug

image
Uncaught Error: Unexpected value 'IonicImageViewerModule' imported by the module 'AppModule'(โ€ฆ)

Not showing right in the css. Things happening

Hi!
I see in the html that things are happening when I tap an image, but its not showing. Something wrong with my css?

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.3.1 Build version 8E1000a

iOS & Android module export error when building

When I use ionic build android or ionic build ios the error for Module ''*'' has no exported member 'Wrapper_ImageViewerDirective'. comes up.

I looked at this issue #17 & it doesn't seem to be my error.

ionic-img-viewer: v1.1.5
Ionic Framework Version: 2.0.0-rc.3

Production build Issue

Can't build in production mode, Any idea ?:
Log :

`[10:47:39] ionic-app-scripts 1.1.4
[10:47:39] build prod started ...
[10:47:39] clean started ...
[10:47:39] clean finished in 2 ms
[10:47:39] copy started ...
[10:47:39] ngc started ...
[10:47:41] build prod failed: Error encountered resolving symbol values statically. Calling function 'makeDecorator',
function calls are not supported. Consider replacing the function or lambda with a reference to an exported
function, resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts,
resolving symbol IonicImageViewerModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol
IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
[10:47:41] ionic-app-script task: "build"
[10:47:41] Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function
calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts,
resolving symbol NgModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts,
resolving symbol IonicImageViewerModule in
/Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol
IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/node_modules/@angular/core/index.d.ts, resolving symbol IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts, resolving symbol IonicImageViewerModule in /Users/Adil/IdeaProjects/aliae/node_modules/ionic-img-viewer/dist/src/module.d.ts
at SyntaxError.BaseError [as constructor] (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:1597:31)
at new SyntaxError (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
at simplifyInContext (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25783:27)
at StaticReflector.simplify (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25795:17)
at StaticReflector.annotations (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25291:64)
at NgModuleResolver.resolve (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:17771:86)
at CompileMetadataResolver.getNgModuleMetadata (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:18272:64)
at addNgModule (/Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25053:62)
at /Users/Adil/IdeaProjects/aliae/node_modules/@angular/compiler/bundles/compiler.umd.js:25064:18
at Array.forEach (native)

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/Users/Adil/.npm-packages/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v6.7.0
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! aliae@ ionic:build: ionic-app-scripts build "--prod"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aliae@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the aliae package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs aliae
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls aliae
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/Adil/IdeaProjects/aliae/npm-debug.log`

Dependencies :
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",

"ionic-angular": "2.3.0",
"@ionic-native/core": "3.1.1",
"@ionic-native/status-bar": "3.1.1",
"@ionic-native/splash-screen": "3.1.1",
"@ionic-native/network": "3.1.1",
"@ionic-native/keyboard": "3.1.1",
"@ionic-native/push": "3.1.1",
"@ionic/storage": "2.0.0",
"ionicons": "3.0.0",

"ionic-img-viewer": "1.1.8",
"rxjs": "5.0.1",
"zone.js": "0.7.2",
"sw-toolbox": "3.4.0"

},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
}

Not Working for Image In Google Map Info Window

I can get the imageViewer to work in a .html file of an Ionic 2 app I'm building, but it is not working in a .ts file that I'm writing a google map info window in. No errors appear. When I click the image just nothing happens.

let ContentPlace = `<img height="125" width="125" src=${this.a} imageViewer />`;
       var infoWindow = new google.maps.InfoWindow({
           content: " "
         });
   google.maps.event.addListener(marker2, 'click', () => {
   infoWindow.close();
   infoWindow.setContent(ContentPlace);
   infoWindow.open(this.map, marker2);
   });
     });

this.a is a base64 image. I have tried wrapping it in quotation marks like so: "${this.a}", but nothing.

Am I doing something wrong, or is this a limitation of ionic-img-viewer?

ngc failed: Failed to transpile TypeScript

face issue in build prod mode.

ionic2: v2.2.1
ionic-img-viewer: v2.1.0

[13:09:01] typescript: node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts, line: 6
Type 'any' is not a constructor function type.

   L5:  import { DomController } from 'ionic-angular';
   L6:  export declare class ImageViewerTransitionGesture extends PanGesture {
   L7:      private component;

[13:09:01] ngc failed: Failed to transpile TypeScript
[13:09:01] ionic-app-script task: "build"
[13:09:01] Error: Failed to transpile TypeScript
Error: Failed to transpile TypeScript
at /home/erp/Mobile_app/ionic-sales-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:70:47

Swipe for cancel is not working

Double click to zoom causes:

(index):28 Uncaught TypeError: Cannot read property 'cancel' of undefined http://localhost:1024/build/polyfills.js Line: 3
console.(anonymous function) @ (index):28
window.onerror @ (index):12
polyfills.js:3 Uncaught TypeError: Cannot read property 'cancel' of undefined
    at ImageViewerGesture.PanGesture.pointerUp (drag-gesture.js:115)
    at PointerEvents.handleTouchEnd (ui-event-manager.js:89)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at HTMLElement.invoke (polyfills.js:3)

When tried to cancel with swipe event the app freezes I got in addition:

Uncaught TypeError: Cannot read property 'write' of undefined http://localhost:1024/build/polyfills.js Line: 3
console.(anonymous function) @ (index):28
window.onerror @ (index):12
polyfills.js:3 Uncaught TypeError: Cannot read property 'write' of undefined
    at ImageViewerGesture.PanGesture.pointerMove (drag-gesture.js:98)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at HTMLElement.invoke (polyfills.js:3)

Ionic 2 RC4

Compatibility with Ionic 2.2.0

Running 1.2.2 works fine on ionic 2.1.0, however after upgrading to ionic 2.2.0 (which has a newer angular 2 version):

ionic build works fine
ionic build --prod generates this error:

ionic-app-scripts 1.1.4
build prod started ...
clean started ...
clean finished in 4 ms
copy started ...
ngc started ...
build prod failed: Error encountered resolving symbol values statically. Calling function 'makeDecorator',
            function calls are not supported. Consider replacing the function or lambda with a reference to an exported
            function, resolving symbol NgModule in /node_modules/ionic-img-viewer/node_modules/@angular/core/src/metadata/ng_module.d.ts
...

ionic 3.1.0 support

ionic build

[13:21:02] transpile started ...
[13:21:05] typescript: node_modules/ionic-img-viewer/dist/src/image-viewer-transition-gesture.d.ts, line: 6
Type 'any' is not a constructor function type.

   L5:  import { DomController } from 'ionic-angular';
   L6:  export declare class ImageViewerTransitionGesture extends PanGesture {
   L7:      private component;

how to use base64 ?

Hi,
image I am using sanitizer.bypassSecurityTrustUrl(sale.img) and it works fine
but when I add imageViewer directive it open new with broken image
and error says WARNING: sanitizing unsafe URL value data:image/jpeg

Bug on Ionic2 RC3

Getting this issue on Ionic RC3
Property 'create' does not exist on type 'GestureController'.

Problem is that they have changed the way the GestureController works.
I'll try to submit a Pull Request here.

build prod failed: can't find symbol KeyRegistry exported from module

I encounter this bug with the build command ionic build android --prod.

ionic2: v2.2.1
ionic-img-viewer: v1.3.2

[10:53:22] build prod failed: can't find symbol KeyRegistry exported from module
/private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
[10:53:22] ionic-app-script task: "build"
[10:53:22] Error: can't find symbol KeyRegistry exported from module
/private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module /private/var/www/experiment/MotionscloudWebrtc/node_modules/ionic-img-viewer/node_modules/@angular/core/src/di/reflective_key.d.ts

[Feature] Be able to pinch to zoom?

I was wondering if this would be possible or if you have thought about it? Some of my users are thrown off to the fact of having to double tap the image.

[Feature] Add support for dynamic images

I am loading html content from the server and displaying it in an ionic app. It would be great to be able to use this plugin to add imageViewer support for these dynamically loaded img tags. I tried to manually add click handlers to these images and using ImageViewer.create (copying code from your directive) but it appears that your module is not exporting the ImageViewer class.

Not totally familiar with the internals of modules in ng2 so not sure whether adding this to the exports would do the trick. Anyways, would be nice to have, in the meantime I'm hacking something together.

Update: can confirm that if I add ImageViewer to the generated exports from your module then dynamic images are supported.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.