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:
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)
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.
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 peloARIAque 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.
Deixe um comentário