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


<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

Amp html en español.
<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

This is a border collie.
 <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>




Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: