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:
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)
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.