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



Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: