![[IONIC 3] – Zoom em Imagem](https://ilovecode.com.br/wp-content/uploads/2017/10/img.png)
[IONIC 3] – Zoom em Imagem
Olá pessoal, tudo bem?
A dica de hoje é bem simples e útil, vamos aprender facilmente a dar zoom em imagens com Ionic, ok?
Bora lá?
1. Criar o projeto Ionic
Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:
|
1 |
ionic start imageZoom blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
|
1 |
cd imageZoom |
2. Instalando componente img-viewer
Bom, para facilitar nossa vida com o zoom em imagem, existem diversos componentes praticamente prontos que podemos utilizar, nesse caso mostrarei o img-viewer. Executaremos o seguinte:
|
1 |
npm install --save ionic-img-viewer |
Feito a instalação, vamos importar o componente no nosso projeto, no arquivo src/app/app.module.ts:
|
1 2 3 4 5 6 7 8 9 10 11 |
import { IonicImageViewerModule } from 'ionic-img-viewer'; { .... } imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicImageViewerModule ], |
3. Demonstrando a imagem
Agora, já estamos aptos a utilizar o img-viewer, então vamos alterar o arquivo src/pages/home/home.html:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header> <ion-navbar> <ion-title> Img Zoom </ion-title> </ion-navbar> </ion-header> <ion-content padding> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSir0JxM2aPWU6TckxnV3IgmSBigs_53ErKSFf0iobarapLMMW1" #myImage (click)="presentImage(myImage)" /> </ion-content> |
Como o intuito aqui é simplesmente demonstrar zoom em imagem, colocamos um simples componente img, a propriedade src fica a seu critério, e definimos um id para ela, denominado #myImage.
No evento click iremos passar uma função que vai chamar o img-viewer e a mágica acontecerá: (click)=”presentImage(myImage)”
Agora, iremos construir a função presentImage, passando como parâmetro a nossa imagem, então no arquivo src/pages/home/home.ts, deixaremos assim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { ImageViewerController } from 'ionic-img-viewer'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { _imageViewerCtrl: ImageViewerController; constructor(public navCtrl: NavController, imageViewerCtrl: ImageViewerController) { this._imageViewerCtrl = imageViewerCtrl; } presentImage(myImage) { const imageViewer = this._imageViewerCtrl.create(myImage); imageViewer.present(); } } |
Importamos o componente img-viewer, criamos uma variável com nome de _imageViewerCtrl onde iremos instanciar o ImageViewerController.
E por fim, criamos a função presentImage(myImage) que recebe a nossa imagem definida no src/pages/home/home.html, chamamos a instância criada, e apresentamos com o imageViewer.present().
Após executar nosso projeto, com o comando
|
1 |
ionic serve -l |
ou
|
1 |
ionic cordova run android |
ou
|
1 |
ionic cordova run ios |
deveremos ter algo semelhante à isso:
Algumas características de execução:
- Toque na imagem para vê-la em tela cheia;
- Deslize para cima / para baixo para fechar a view;
- Toque na seta de navegação para fechar a view;
- Toque duas vezes / aperte a imagem quando abrir para ampliar.
Bom, é isso galera…
Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu, até mais!
About author
You might also like
![[IONIC] – IonFab com Button e Label](https://ilovecode.com.br/wp-content/uploads/2017/11/1-1-500x500_c.png)
[IONIC] – IonFab com Button e Label
Share this on WhatsAppOlá galera, tranquilo? A dica de hoje é também muito simples. Porém dá um certo estilo e agradabilidade para o usuário ao utilizar. Será um utilizando componente
Xamarin – Como consumir uma api local que roda no IIS Express no emulador
Share this on WhatsAppAprenda a consumir uma api local direto do emulador Hoje venho trazer uma dica bem interessante para vocês, irei explicar como podemos rodar 2 projetos ao mesmo
Apple força a barra e aplicativos híbridos precisam ser atualizados!
Share this on WhatsAppFala Dev, Hoje quero alertar de algo que já anda rolando um tempo e que muita gente ainda não deu atenção. Se você é desenvolvedor de aplicativos
8 Comments
Paladino
março 02, 00:20Elaynne
março 13, 17:39david
abril 18, 16:40kofmaniac
junho 22, 11:04Junior Abranches
julho 03, 09:22Paulo Neto
outubro 15, 16:42phelipeguedes
novembro 04, 03:09tadeu diniz
março 13, 15:00