amp-lightbox
Description
Muestra elementos en modo lightbox con viewport completo.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
| Descripción | Muestra elementos en modo lightbox con viewport completo. |
| Secuencia de comandos obligatoria | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Diseños admitidos | nodisplay |
| Ejemplos | Consulta el ejemplo de amp-lightbox de AMP By Example. |
Comportamiento
El componente amp-lightbox define los elementos secundarios que se muestran en una superposición o en un modo de viewport completo. Cuando el usuario toca o hace clic en un elemento (p. ej., un botón), el ID de amp-lightbox al que se hace referencia en el atributo on del elemento que ha recibido el clic activa el lightbox; este ocupa todo el viewport y muestra los elementos secundarios de amp-lightbox.
Al pulsar la tecla Esc del teclado se cierra el lightbox. Otra posibilidad es definir el atributo on en uno o varios elementos del lightbox y definir su método en close para cerrar el lightbox cuando se toque el elemento o se haga clic en él.
<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 el estilo de la animación para abrir el lightbox. De forma predeterminada, se definirá en fade-in. Los valores válidos son fade-in , fly-in-bottom y fly-in-top. Nota: Los valores predefinidos de animación de fly-in-* modifican la propiedad transform del elemento amp-lightbox. No transformes el elemento amp-lightbox directamente. Si necesitas aplicar una transformación, defínela en un elemento anidado. |
| close-button (obligatorio en los anuncios AMP HTML) | Muestra un encabezado de botón de cierre en la parte superior del lightbox. Este atributo solo es obligatorio y válido para los anuncios AMP HTML. |
| id (obligatorio) | ID único del lightbox. |
| layout (obligatorio) | Se debe definir en nodisplay. |
| scrollable (obligatorio) | Si el atributo scrollable está presente, el contenido del lightbox se puede desplazar cuando hay altura adicional en el lightbox. Nota: Cuando se usa <amp-lightbox> en un anuncio AMP HTML, el atributo scrollable no está permitido. Para obtener más información, consulta la sección sobre el uso de amp-lightbox en anuncios AMP HTML. |
| scrollable (obligatorio) |
Estilo
Puedes aplicar estilo a amp-lightbox con CSS estándar.
Acciones
El componente amp-lightbox muestra las acciones que se pueden activar con AMP on-syntax:
| Acción | Descripción |
|---|---|
open (predeterminado) | Abre el lightbox. |
close | Cierra el lightbox. |
Usar amp-lightbox en anuncios AMP HTML
amp-lightbox para anuncios AMP HTML está en fase experimental porque se está desarrollando. Para utilizar amp-lightbox en anuncios AMP HTML, habilita el experimento amp-lightbox-a4a-proto. Existen algunas diferencias entre usar amp-lightbox en documentos AMP normales y en anuncios escritos en AMP HTML:
El atributo close-button es obligatorio
En los anuncios AMP HTML se debe incluir el atributo close-button. Con este atributo, los encabezados se muestran en la parte superior del lightbox. El encabezado, que contiene un botón de cierre y una etiqueta que indica "Anuncio", se necesita para lograr los siguientes objetivos:
- Ofrecer una experiencia de usuario coherente y predecible para los anuncios AMP HTML.
- Asegurarse de que el lightbox siempre tenga un punto de salida; de lo contrario, la creatividad podría interceptar el contenido del documento host a través de un lightbox.
El atributo close-button es obligatorio y solo se permite en anuncios AMP HTML. En los documentos AMP normales, se puede mostrar un botón de cierre donde lo necesites como parte del contenido de <amp-lightbox>.
No se permite usar lightboxes desplazables
No se permite usar lightboxes desplazables en los anuncios AMP HTML.
Fondo transparente
Si usas <amp-lightbox> en anuncios AMP HTML, el fondo del elemento <body> se vuelve transparente porque el tiempo de ejecución de AMP cambia el tamaño y reajusta el contenido de la creatividad antes de mostrar el lightbox. Con esto se evita que la creatividad salte al abrirse el lightbox. Si la creatividad necesita un fondo, colócalo en un contenedor intermedio (como un <div> de tamaño completo) en lugar de insertarlo en <body>.
Cuando el anuncio AMP HTML se ejecuta en un entorno de terceros (por ejemplo, en un documento que no es AMP), la creatividad se centra con respecto al viewport y luego se muestra. Esto se debe a que los iframes de terceros deben basarse en una API postMessage para habilitar funciones como el cambio de tamaño de los marcos, que es asíncrono. Por lo tanto, al centrar la creatividad en primer lugar, la transición se hace de manera fluida y sin saltos visuales.
Ejemplos de transiciones en lightbox para anuncios AMP HTML
En los ejemplos siguientes se muestra la transición de un anuncio AMP HTML que tiene el atributo animate-in="fly-in-bottom" definido en el elemento lightbox de un anuncio AMP HTML en un friendly iframe, y de un anuncio AMP HTML en un iframe de terceros.
En friendly iframes (p. ej., procedente de una caché AMP)
En iframes de terceros (p. ej., no procedente de una caché AMP)
Validación
Consulta las reglas de amp-lightbox en la especificación de la herramienta de validación de AMP.
¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.
Ir a Stack Overflow ¿Encontró un error o considera que falta una función?¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.
Ir a GitHub