¿Cómo añadir amp-lightbox?
Amp-lightbox
El componente amp-lightbox permite una "lightbox" o una experiencia similar - donde a la interacción del usuario un componente se expande para llenar el visor, hasta que el usuario lo vuelva a cerrar.
Disposición
Ingrese el siguiente script justo después de la apertura <head>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Uso básico
El componente amp-lightbox define los elementos secundarios que se mostrarán en una superposición de vista completa. Para cerrar la caja de luz mediante un clic o toque, use el atributo on en uno o más elementos dentro de la caja de luz. En este ejemplo, el usuario puede hacer clic en
Ejemplo: <amp-lightbox id="my-lightbox" layout="nodisplay"> <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0"> <h1>Hello World!</h1> </div> </amp-lightbox>
Lighbox se muestra cuando el usuario teclea o hace clic en un elemento con un atributo que apunta al id de un elemento amp-lightbox.
<button class="ampstart-btn caps m2" on="tap:my-lightbox" role="button" tabindex="0"> Open lightbox </button>
Para mostrar imágenes en un lightbox, AMP también incluye el componente amp-image-lightbox, que no necesita la imagen especificada dos veces.
Comentarios
Disqus comments:
Facebook comments: