[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

COMO fazer CRUD em C# com LiteDB (Embedded NoSQL)

Share this on WhatsAppFala Dev! Hoje resolvi trazer um vídeo mostrando como podemos realizar um CRUD utilizando um banco de dados que é orientado a documentos e funciona de forma

Mobile 0 Comments

Curso Grátis Ionic – Estrutura de Pastas e Arquivos do Projeto

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 a

Mobile 3 Comments

Criando um background com slides em aplicações mobile com Ionic

Share this on WhatsAppOlá Galera.. como estão? Hoje vamos construir um belo background com slides para ser usado tanto em aplicações mobile com Ionic. O conceito servirá também para outras

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