[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 16 Comments

Curso completo e grátis de Ionic 2 em português

Share this on WhatsAppVeja como aprender Ionic 2 Hoje trago uma notícia que irá interessar muita gente, fechei uma parceria com um desenvolvedor de Ionic 1 e Ionic 2 e

Mobile 0 Comments

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

Mobile 0 Comments

Flutter – Conhecendo o SDK mobile do Google

Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova

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