¿Cómo agregar una galería de imágenes lightbox? amp-lightbox-gallery

Desde que se lanzó AMP, los desarrolladores han estado pidiendo una forma fácil de vincular <amp-carrusel> con <amp-image-lightbox> para que los usuarios puedan experimentar una visión inmersiva del contenido en los carruseles. Si bien ha sido posible combinar numerosos componentes (como  <amp-bind> ) para hacer que algo como esto funcione, no ha sido fácil.

El componente <amp-lightbox-gallery>  proporciona una experiencia multimedia inmersiva que puede ser independiente o integrarse con el amp-carrusel. El componente se puede aplicar a una imagen independiente o a un grupo de imágenes para que cuando un usuario toque estas imágenes, ingrese una vista inmersiva donde puedan deslizar sin problemas de una imagen a otra. Cuando  <amp-lightbox-gallery> se aplica a un <amp-carrusel>, todas las imágenes del carrusel heredan el comportamiento de la galería lightbox, de modo que los deslizamientos entre los elementos de la vista inmersiva se sincronizan con los del lightbox, para crear una imagen uniforme, experiencia de galería intuitiva.

Inserte los siguientes componentes "script"

Importe el componente amp-lightbox-gallery en el encabezado.

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

De manera opcional, importe el componente amp-carrusel en el encabezado si está usando lightbox con carrusel.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Uso Básico

Este es un ejemplo básico que demuestra lightboxed <amp-img>. Usted tiene uno o más elementos <amp-img>  en la página. Simplemente agregue el atributo "lightbox" a cada imagen que desee ver en un lightbox.

Ejemplo




  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



<div class="container">
  <amp-img lightbox
    src="/img/road-1.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <amp-img lightbox
    src="/img/road-2.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
<amp-img lightbox
    src="/img/road-3.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Uso con carrusel

También puede usar <amp-lightbox-gallery> con <amp-carousel> para ver los contenidos del carrusel en un lightbox. Simplemente incluya a <amp-carousel> con <amp-img> y agregue el atributo "lightbox" al <amp-carousel>. Las imágenes de la caja lightbox se sincronizarán con las diapositivas del carrusel.

Ejemplo



    
    
    
  

  <amp-carousel lightbox
    width="400"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="/img/image1.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
    <amp-img src="/img/image2.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
    <amp-img src="/img/image3.jpg"
      width="400"
      height="300"
      layout="responsive"></amp-img>
  </amp-carousel>

Grupos de Lightbox

Por defecto, todos los elementos de lightbox se agruparán en el mismo lightbox a menos que pertenezcan a un carrusel. Todos los elementos en el mismo carrusel lightbox pertenecen a la misma caja lightbox. Puede anular este comportamiento estableciendo el atributo lightbox en una cadena única. Un patrón común es tener una imagen de héroe que se abre en una galería lightbox de varias imágenes.

Ejemplo



    
      See photo gallery
    
    


<amp-img lightbox="hero"
      src="/img/clean-2.jpg"
      width="400"
      height="300"
      layout="responsive">
      <span class="overlay-text">See photo gallery</span>
    </amp-img>
    <div hidden>
      <amp-img lightbox="hero"
        src="/img/clean-1.jpg"
        layout="responsive"
        width="400"
        height="710"></amp-img>
      <amp-img lightbox="hero"
        src="/img/clean-3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    </div>

Subtítulos (Captions)

Opcionalmente, puede especificar un título para cada elemento en el lightbox. Estos campos se leen y muestran automáticamente <amp-lightbox-gallery> en el siguiente orden de prioridad:

figcaption (si el elemento lightboxed es el hijo de una figura)
aria-describedby Los siguientes ejemplos demuestran cómo usar subtítulos. La primera imagen no tiene un título. La segunda imagen utiliza <figcaption>. La tercera imagen utiliza  aria-describedby.

Ejemplo





  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  

    
    

      This is a long road. We don't know where it leads.
    
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  



<div class="container">
  <amp-img lightbox="caption"
    src="/img/road-1.jpg"
    width="300"
    height="200"
    layout="responsive"></amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
 <figure>
    <amp-img lightbox="caption"
      src="/img/road-2.jpg"
      width="300"
      height="200"
      layout="responsive"></amp-img>
    <figcaption class="image">
      This is a long road. We don't know where it leads.
    </figcaption>
  </figure>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 <amp-img lightbox="caption"
    src="/img/road-3.jpg"
    layout="responsive"
    width="300"
    height="200"
    aria-describedby="desc">
  </amp-img>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div hidden
    id="desc">
    I'm not too sure where this road leads either.
  </div>
</div>

Tags: Amp HTML en espanol

Share: