amp-lightbox
Description
Exibe elementos em um modal "lightbox" que ocupa toda a janela de visualização.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
| Descrição | Exibe elementos em um modal "lightbox" que ocupa toda a janela de visualização. |
| Script obrigatório | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Layouts compatíveis | nodisplay |
| Exemplos | Veja um exemplo de amp-lightbox no site AMP By Example. |
Comportamento
O componente amp-lightbox define elementos filhos que são exibidos em uma modal/sobreposição que ocupa toda a janela de visualização. Quando o usuário toca ou clica em um elemento (por exemplo, um botão), o código do amp-lightbox referenciado no atributo on do elemento clicado aciona o lightbox para que ocupe toda a janela de visualização e exiba os elementos filhos do amp-lightbox.
Pressionar a tecla Esc no teclado fecha o lightbox. Como alternativa, definir o atributo on em um ou mais elementos do lightbox e configurar o respectivo método como close fecha o lightbox quando se toca ou clica no elemento.
<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
<blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
<button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>
<amp-image-lightbox>. Atributos
| animate-in (opcional) | Define o estilo da animação para abrir o lightbox. Por padrão, ele é definido como fade-in. Os valores válidos são fade-in, fly-in-bottom e fly-in-top. Observação: as predefinições de animação fly-in-* modificam a propriedade transform do elemento amp-lightbox. Não confie na transformação direta do elemento amp-lightbox. Se você precisar aplicar uma transformação, defina-a em um elemento aninhado. |
| close-button (obrigatório em anúncios HTML para AMP) | Renderiza um botão "fechar" no cabeçalho, na parte superior do lightbox. Esse atributo só é obrigatório e válido para uso com anúncios HTML para AMP. |
| id (obrigatório) | Identificador exclusivo para o lightbox. |
| layout (obrigatório) | Precisa ser configurado como nodisplay. |
| scrollable (opcional) | Quando o atributo scrollable está presente, o conteúdo do lightbox pode ser rolável ao ultrapassar a altura do lightbox. Observação: o atributo scrollable não é permitido ao usar o <amp-lightbox> dentro de um anúncio HTML para AMP. Para ver mais detalhes, leia a seção Usar o amp-lightbox em anúncios HTML para AMP. |
| scrollable (opcional) |
Estilo
É possível estilizar o amp-lightbox com CSS padrão.
Ações
O amp-lightbox expõe as seguintes ações em que você pode usar a sintaxe AMP para acionar:
| Ação | Descrição |
|---|---|
open (padrão) | Abre o lightbox. |
close | Fecha o lightbox. |
Usar o amp-lightbox em anúncios HTML para AMP
amp-lightbox para uso em anúncios HTML para AMP é experimental e está em desenvolvimento. Para usar o amp-lightbox em anúncios HTML para AMP, ative o experimento amp-lightbox-a4a-proto. Há algumas diferenças entre o uso de amp-lightbox em documentos AMP normais e em anúncios escritos em HTML para AMP:
Botão de fechar obrigatório
Para anúncios HTML para AMP, o atributo close-button é obrigatório. Esse atributo faz com que um cabeçalho seja renderizado na parte superior do lightbox. O cabeçalho contém um botão "Fechar" e um rótulo escrito "Anúncio". O requisito desse cabeçalho é necessário para:
- definir uma experiência do usuário consistente e previsível para anúncios HTML para AMP;
- garantir que sempre exista um ponto de saída para o lightbox. Caso contrário, o criativo poderá invadir o conteúdo do documento do host por meio de um lightbox.
O atributo close-button é obrigatório e permitido apenas em anúncios HTML para AMP. Em documentos AMP normais, você pode renderizar um botão "Fechar" sempre que precisar dele no conteúdo do <amp-lightbox>.
Lightboxes roláveis não são permitidos
Não é permitido usar lightbox rolável em anúncios HTML para AMP.
Plano de fundo transparente
Quando você usa o <amp-lightbox> em anúncios HTML para AMP, o plano de fundo do elemento <body> fica transparente, porque o ambiente de tempo de execução de AMP é redimensionado e realinha o conteúdo do criativo antes da expansão do lightbox. Isso é feito para evitar um "salto" visual do criativo enquanto o lightbox é aberto. Se seu criativo precisar de um plano de fundo, configure-o em um contêiner intermediário (como um <div> de tamanho original), em vez de um <body>.
Quando o anúncio HTML para AMP é executado em um ambiente de terceiros (por exemplo, em um documento que não seja AMP), o criativo é centralizado em relação à janela de visualização e depois é expandido. Isso ocorre porque os iframes de terceiros precisam de uma API postMessage para ativar recursos como o redimensionamento de frames, que é assíncrono. Assim, a centralização do criativo permite uma transição suave, sem saltos visuais.
Exemplos de transições no lightbox para anúncios HTML para AMP
Nos exemplos abaixo, demonstramos como a transição procura um anúncio HTML para AMP que tenha o atributo animate-in="fly-in-bottom" configurado no elemento lightbox para um anúncio HTML para AMP em um iframe compatível, bem como um anúncio HTML para AMP em um iframe de terceiros.
Em iframes compatíveis (por exemplo, provenientes de um cache de AMP)
Em iframes de terceiros (por exemplo, fora do cache de AMP)
Validação
Veja as regras do amp-lightbox (link em inglês) nas especificações do validador de AMP.
Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.
Ir para o Stack Overflow Encontrou um bug ou sente falta de um recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Ir para o GitHub