¿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'/>
<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>
.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/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>
<div class="container">
<div class="col col-6">
<figure>
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/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>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/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>
Comentarios
Disqus comments:
Facebook comments: