¿Cómo agregar imágenes con Lightboxes y Captions en AMP?

Aprenda a insertar imágenes con Lightboxes y Captions con AMP. Images with Lightboxes and Captions.

Vamos a utilizar el siguiente componente:

amp-image-lightbox

Images with Lightboxes and Captions

Paso 1) Agregar los componentes

Ejemplo

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

Paso 2 Vamos a insertar un CSS para acoplar este ejemplo, inserte el CSS justo antes de </head>

Ejemplo

<style amp-custom>
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}

/*! CSS Grid | https://ayudadeblogger.com */
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}
</style>

Paso 3) Agregar el siguiente código después de la apertura <body>

Ejemplo

<section>
 
<div class="container">

<div class="col col-6">
    <figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://2.bp.blogspot.com/-ngV6Rc1lGsU/Wue14GzaH3I/AAAAAAAAZXU/FWQTxPVnigo_JaewHQwPOIs7dGpEJitxwCLcBGAs/s1600/blog-3.jpg" layout="responsive" width="540" height="360" alt="AMP" >
    <div placeholder="">
   </div></amp-img>

   <figcaption>
   <center>
    Lorem Ipsum Dolor Sit Amet
   </center>   
   </figcaption>
    </figure>
 
</div>
         
<div class="col col-6">
      <figure>
<amp-img on="tap:lightbox2" role="button" tabindex="0" src="https://4.bp.blogspot.com/-vBzYo5JZgwQ/Wue187US7JI/AAAAAAAAZXc/33_Isf-xAJATDV46jPKoWPG_noZlA-AOwCLcBGAs/s1600/funfact.jpg" layout="responsive" height="360" width="539.3258426966293" alt="AMP">
   <div placeholder="">
   </div></amp-img>
 
 <figcaption>
    <center>
    Lorem Ipsum Dolor Sit Amet
    </center>
    </figcaption>
   </figure>
   </div> 
       
 </div>

    <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
    <amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox>

</section>

Paso 4) Cambie las URLs de imagenes, también las palabras de ejemplo

Paso 5) Demostración
A continuación la estructura completa del ejemplo

Ejemplo

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/>
<link rel="canonical" href="https://www.amphtmlenespanol.com/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<style amp-custom>
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}

/*! CSS Grid | https://ayudadeblogger.com */
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}
</style>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

</head>

<body>

<section>
 
<div class="container">

<div class="col col-6">
    <figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://2.bp.blogspot.com/-ngV6Rc1lGsU/Wue14GzaH3I/AAAAAAAAZXU/FWQTxPVnigo_JaewHQwPOIs7dGpEJitxwCLcBGAs/s1600/blog-3.jpg" layout="responsive" width="540" height="360" alt="AMP" >
    <div placeholder="">
   </div></amp-img>

   <figcaption>
   <center>
    Lorem Ipsum Dolor Sit Amet
   </center> 
   </figcaption>
    </figure>
 
</div>
         
<div class="col col-6">
      <figure>
<amp-img on="tap:lightbox2" role="button" tabindex="0" src="https://4.bp.blogspot.com/-vBzYo5JZgwQ/Wue187US7JI/AAAAAAAAZXc/33_Isf-xAJATDV46jPKoWPG_noZlA-AOwCLcBGAs/s1600/funfact.jpg" layout="responsive" height="360" width="539.3258426966293" alt="AMP">
   <div placeholder="">
   </div></amp-img>

 <figcaption>
    <center>
    Lorem Ipsum Dolor Sit Amet
    </center>
    </figcaption>
   </figure>
   </div>
     
 </div>

    <amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
    <amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox>

</section>

</body>
</html>



Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: