El componente amp-lightbox-gallery se usa para brindar una experiencia de caja de luz para otros componentes de amplificador como amp-carousel, amp-img. Actualmente, amp-lightbox-gallery solo admite imágenes.
Script requerido: importar el componente amp-lightbox-gallery al encabezado.
HTML
<script async custom-element="amp-lightbox-gallery" src= "https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"> </script>
Atributos:
- lightbox: Usamos este atributo para agregar un efecto de lightbox a las imágenes.
- src: especifique la URL o la ruta de la imagen que se va a incrustar.
- diseño: especifica el diseño de la imagen, por ejemplo, sensible.
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-lightbox-gallery/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,
initial-scale=1">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<title>Google AMP amp-lightbox-gallery</title>
<!-- Import the amp-lightbox-gallery
component in the header. -->
<script async custom-element="amp-lightbox-gallery"
src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js">
</script>
<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>
<style amp-custom>
:root {
--color-primary: #005AF0;
--color-text-light: #fff;
--space-1: .5rem;
--space-2: 1rem;
}
</style>
</head>
<body>
<div>
<amp-img lightbox src=
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"
width="300" height="200"
layout="responsive">
</amp-img>
<p class="paragraph">
welcome to geeksforgeeks
</p>
<amp-img lightbox
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"
width="300" height="200"
layout="responsive">
</amp-img>
<p class="paragraph">
GeeksforGeeks A Computer Science
portal for geeks.
</p>
</div>
</body>
</html>
Producción:
Salida de código
Al hacer clic en la imagen se obtiene la siguiente vista
En la imagen haga clic
Al hacer clic en la opción de galería superior izquierda se obtiene la siguiente vista
Vista de galería
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA