¿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.



Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: