Trabalhando com AMP image light-box

trabalhando com light-box para imagens com amp

No post anterior vimos como implementar um light-box com o componente amp-lightbox e nesse post veremos como implementar com AMP image light-box para imagens, assim trabalharemos com o componente amp-image-lightbox. Ele possui algumas particularidades comparado ao componente amp-lightbox, mas o comportamento será bem-parecido.

O que é AMP Framework?

AMP é um framework que surgiu com o foco na performance e entrega de conteúdo. A sua biblioteca de componentes AMP é ideal para a criação de sites, matérias, e-mails e anúncios. Com AMP, você tem a certeza de que está trabalhando com uma plataforma focada no usuário.

Os seus componentes foram desenvolvidos pensando na rapidez de carregamento e na melhor experiência possível para o internauta. O AMP Framework é uma ótima escolha para quem quer ter resultados positivos em termos de audiência e conversões. Além disso, os seus componentes são responsivos e funcionam perfeitamente em dispositivos móveis.

AMP image light-box

O componente amp-image-lightbox habilita um light-box específico para imagens, quando acionado a imagem será exibida em destaque. Para trabalhar como o componente precisamos primeiramente carregar o script:

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Code language: HTML, XML (xml)

Em seguida adicionamos na nossa aplicação seguinte o código:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

O componente amp-img possui um evento de tap que irá referenciar o light-box que queremos exibir e nesse caso o amp image lightbox (amp-image-lightbox) com id lightbox-caipirinha será o nosso alvo.

Assim como amp-lightbox ele possui o layout nodisplay e com o código acima o resultado será o seguinte:

AMP image light-box quando acionado

O componente amp-image-lightbox já vem com estilização do background interações, por exemplo, zoom, panorâmica, e ações para fechar o lightbox quando o usuário clicar fora da imagem ou precionar ESC.

Diferente do amp-lightbox o amp-image-light pode ser utilizado por múltiplas imagens, assim podemos ter duas imagens efetuando referência ao mesmo light-box. Como no código a seguir:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha1.jpg" width="200" height="100" ></amp-img> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha2.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

Legendas

Um recurso opcional é a inclusão de legendas no light-box, para isso precisamos incluir uma tag figure e como filha uma tag figcaption ou adicionar uma descrição com aria através da propriedade aria-describedby essas serão as duas opções que veremos no código a seguir:

Com tag figure

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <figure> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" layout="responsive" width="300" height="246" ></amp-img> <figcaption>Learn how to prepare the best Caipirinha</figcaption> </figure>
Code language: HTML, XML (xml)
Resultado do AMP image light-box com legenda

AMP image light-boxcom ARIA

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <div> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" aria-describedby="image-description" layout="responsive" width="300" height="246" ></amp-img> <div id="image-description">Caipirinha from Brazil</div> </div>
Code language: HTML, XML (xml)

Em ambas situações o resultado visual será o mesmo, com a legenda no canto inferior.

Vídeo onde eu abordo um pouco mais sobre AMP image light-box

Atributos

Os atributos no componente amp-image-lightbox é um pouco diferente do amp-lightbox não temos opções de animação, mas temos a seguintes propriedades:

  • layout(obrigatório): deve ser nodisplay
  • id (obrigatório): necessário para ser referenciado pelo elemento que ira disparar a ação de exibir
  • data-close-button-aria-label(opcional): uma legenda usada pelo ARIA que podemos incluir no nosso botão fechar.

Se quiser saber mais sobre amp-lightbox eu publiquei um post falando sobre o componente. Para acompanhar o curso de AMP assine o meu canal no YouTube. Qualquer dúvida deixe um comentário e até o próximo post.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.