Categorias
AMP Accelerated mobile pages

Trabalhando com AMP image light-box

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

amp-image-lightbox

O componente amp-image-lightbox habilita um lightbox específico para images, quando acionado a image 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 em 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 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:

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 images, assim podemos ter duas images fazendo 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 light-box com legenda

Com 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.

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 em nosso botão fechar.

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *