[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 19 posts

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

You might also like

Mobile 0 Comments

Curso Grátis Ionic – #4 – NavController, navegando entre telas

Share this on WhatsAppOlá galera, tudo bem? Bom, dando sequência à série “Iniciando com Ionic”, já esta no ar o novo vídeo. Nesse vídeo vamos conhecer um pouco sobre o NavController e

Mobile 0 Comments

Curso Ionic em português – Aula 4 – Importando projeto do Ionic Creator

Share this on WhatsAppImportando dados do Ionic Creator Pessoal, continuando com nossa série de vídeo aulas, hoje trago pra vocês dicas de como importar o projeto criado no Ionic Creator

Mobile 0 Comments

Aprenda criar componentes no Ionic 4

Share this on WhatsAppFala galera!Hoje irei compartilhar com vocês uma dica muito útil que vai permitir que você evite de ficar replicando códigos no Ionic. Imagine um app que tenha

8 Comments

  1. Elaynne
    março 13, 17:39 Reply
    Funcionou mas fez minha conexão com o banco de dados parar de funcionar: Failed to load resource: net::ERR_CONNECTION_REFUSED
    • david
      abril 18, 16:40 Reply
      kkkkkkk caraca, não tem nada a ver uma coisa com a outra. Funcionou certinho aqui, obrigado Junior!
  2. kofmaniac
    junho 22, 11:04 Reply
    Funcionou direitinho, como esperado. Obrigado por compatilhar.
  3. Paulo Neto
    outubro 15, 16:42 Reply
    Junior, desde já obrigado pelo tutorial, já estou utilizando em meu projeto. Queria tirar uma dúvida: Tem algum parâmetro que eu possa utilizar para permitir o swap para outra foto?
  4. phelipeguedes
    novembro 04, 03:09 Reply
    Cara, fiz essa funcionalidade em um app, deu quase tudo certo. A foto abre normalmente, dá zoom, porém ao deitar o celular para ver a imagem na horizontal, a imagem não preenche toda a tela do celular, fica um espaço preto (margem). Na minha aplicação tem várias imagens, quase todas de tamanhos diferentes, e nenhuma se encaixou na tela quando colocada na horizontal. Pode me dar uma ajuda? Valeu.
  5. tadeu diniz
    março 13, 15:00 Reply
    Deu muito certo. Obrigado, parabéns pelo trabalho.

Leave a Reply