Una galería de imágenes es una característica popular en los sitios web y con amp-image-lightbox los desarrolladores pueden agregar efectos de lightbox fácilmente a las páginas HTML de AMP, para activar amp-image-lightbox usamos el componente on action on amp-image.
Script requerido: importar el componente amp-imag-lightbox al encabezado.
HTML
<script async custom-element="amp-image-lightbox" src= "https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"> </script>
Atributos:
- diseño: amp-image-lightbox solo es compatible con el diseño sin pantalla.
- id: especifica el id del componente lightbox. Esto se utiliza como objetivo para la imagen por la acción de encendido.
- data-close-button-aria-label: se utiliza para establecer una etiqueta aria para el botón de cierre.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-image-lightbox</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the amp-image-lightbox
component in the header -->
<script async custom-element="amp-image-lightbox"
src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js">
</script>
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-image-lightbox/index.html">
<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>
<!-- The `amp-image-lightbox` is activated
using the `on` action on an `amp-img`
element-->
<div>
<amp-img on="tap:lightbox1" role="button"
tabindex="0" src=
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"
layout="responsive"
width="300" height="246">
</amp-img>
<amp-image-lightbox id="lightbox1"
layout="nodisplay">
</amp-image-lightbox>
</div>
<!--It is even possible to show different
images in the same amp-image-lightbox-->
<amp-img on="tap:lightbox1" role="button"
tabindex="0" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"
layout="responsive" width="600"
height="400">
</amp-img>
<!--The amp-image-lightbox also can
optionally display a caption for
the image at the bottom of the
viewport. -->
<figure>
<amp-img on="tap:lightbox1" role="button"
tabindex="0" src=
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"
layout="responsive"
width="300" height="246">
</amp-img>
<figcaption>geeksforgeeks</figcaption>
</figure>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA