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

[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

Mobile 0 Comments

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

  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