Categorias
AMP Accelerated mobile pages

Trabalhando com light-box para imagens com AMP: amp-image-lightbox

No post anterior vimos como implementar um light-box com o componente amp-lightbox e nesse post vamos ver como implementar 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>

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>

O amp-img possui um evento de tap que irá referenciar o light-box que queremos exibir e nesse caso o 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>

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>

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>

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 *