[IONIC 3] – Zoom em Imagem

[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:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

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:

Feito a instalação, vamos importar o componente no nosso projeto, no arquivo src/app/app.module.ts:

3. Demonstrando a imagem

Agora, já estamos aptos a utilizar o img-viewer, então vamos alterar o arquivo src/pages/home/home.html:

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:

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

ou

ou

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!

Previous Curso grátis de Ionic 3 em português
Next [IONIC 3] - Criando elegante Slide-Show

About author

Junior Abranches
Junior Abranches 17 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

Curso Ionic em português – Aula 8 – Adicionando tela de aguarde!

Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde

Mobile 1Comments

Criando Horizontal Scrolling

Share this on WhatsAppFala galera, tranquilo? Vou mostrar aqui mais uma dica para embelezar os projetos e aplicativos de vocês, utilizando um horizontal scrolling. Bora lá? 1. Criar o projeto Ionic Vamos

Mobile 3 Comments

Curso gratuito de Android em português

Share this on WhatsAppeXcript disponibiliza curso gratuito de Android em português Hoje temos uma ótima notícia para vocês, através de uma grande parceria com eXcript, iremos poder disponibilizar vídeo aulas

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply