Trabalhando com AMP image light-box - Blog Fellyph Cintra
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.
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:
Em seguida adicionamos em nossa aplicação seguinte o código:
<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox>
on="tap:lightbox-caipirinha"
src="caipirinha.jpg"
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:
src="caipirinha1.jpg"
src="caipirinha2.jpg"
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
<figcaption>Learn how to prepare the best Caipirinha</figcaption>
Resultado do light-box com legenda
Com ARIA
aria-describedby="image-description"
<div id="image-description">Caipirinha from Brazil</div>
Em ambas situações o resultado visual será o mesmo, com a legenda no canto inferior.
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.