¿Cómo añadir amp-image-lightbox?
amp-image-lightbox
Ejemplo de implementación: El componente amp-image-lightbox permite al usuario expandir una imagen para llenar la ventana gráfica.
Preparar
Importe el componente amp-image-lightbox en el encabezado.
Inserte el siguiente script justo despues de la apertura <head>
Uso básico
El amp-image-lightbox se activa mediante la acción on de un elemento amp-img que hace referencia al ID del elemento lightbox.
La imagen mostrada en el lightbox no necesita ser definida.
Incluso es posible mostrar diferentes imágenes en el mismo amp-image-lightbox. Aquí hay otra imagen que usa la misma lightbox.
Captions
El amp-image-lightbox también puede mostrar opcionalmente una leyenda para la imagen en la parte inferior de la ventana gráfica. Esto puede ser el <figcaption> elemento <figcaption> cuando la imagen está en la etiqueta de figura ...
... o el contenido del elemento cuyo ID está especificado por el atributo de la imagen descrito por aria-describedby.
Preparar
Importe el componente amp-image-lightbox en el encabezado.
Inserte el siguiente script justo despues de la apertura <head>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Uso básico
El amp-image-lightbox se activa mediante la acción on de un elemento amp-img que hace referencia al ID del elemento lightbox.
Ejemplo<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/img/Border_Collie.jpg" alt="Amp html en español" title="Amp html en español, view in lightbox" layout="responsive" width="300" height="246"></amp-img>
La imagen mostrada en el lightbox no necesita ser definida.
Ejemplo <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
Incluso es posible mostrar diferentes imágenes en el mismo amp-image-lightbox. Aquí hay otra imagen que usa la misma lightbox.
Ejemplo<amp-img on="tap:lightbox1" role="button" tabindex="0" src="/img/Hovawart.jpg" alt="Amp html en español" title="Amp html en español, view in lightbox" layout="responsive" width="600" height="400"></amp-img>
Captions
El amp-image-lightbox también puede mostrar opcionalmente una leyenda para la imagen en la parte inferior de la ventana gráfica. Esto puede ser el <figcaption> elemento <figcaption> cuando la imagen está en la etiqueta de figura ...
Ejemplo<figure> <amp-img on="tap:lightbox1" role="button" tabindex="0" src="/img/Border_Collie.jpg" alt="Amp html en español" title="Amp html en español, view in lightbox" layout="responsive" width="300" height="246"></amp-img> <figcaption>Border Collie.</figcaption> </figure>
... o el contenido del elemento cuyo ID está especificado por el atributo de la imagen descrito por aria-describedby.
Ejemplo<amp-img on="tap:lightbox1" role="button" tabindex="0" aria-describedby="imageDescription" alt="Amp html en español" title="Amp html en español, view in lightbox" src="/img/Border_Collie.jpg" width="300" height="246"></amp-img> <div id="imageDescription"> This is a border collie. </div> This is a border collie.
Comentarios
Disqus comments:
Facebook comments: