An image gallery is a popular feature in websites and with amp-image-lightbox developers can add lightbox effects easily to AMP HTML pages, to activate the amp-image-lightbox we use the on action on amp-image component.
Required Script: Importing the amp-imag-lightbox component into the header.
HTML
< script async custom-element = "amp-image-lightbox" src =
</ script >
|
Attributes:
- layout: The amp-image-lightbox only supports the nodisplay layout.
- id: Specifies the id of the lightbox component. This is used as a target for the image by the on action.
- data-close-button-aria-label: Used to set an aria-label for the close button.
Example:
HTML
<!doctype html> < html amp>
< head >
< meta charset = "utf-8" >
< title >Google AMP amp-image-lightbox</ title >
< script async src =
</ script >
<!-- Import the amp-image-lightbox
component in the header -->
< script async custom-element = "amp-image-lightbox"
</ script >
< meta name = "viewport" content =
"width=device-width,minimum-scale=1,initial-scale=1" >
< link rel = "canonical" href =
< 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 =
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 =
layout = "responsive"
width = "300" height = "246" >
</ amp-img >
< figcaption >geeksforgeeks</ figcaption >
</ figure >
</ body >
</ html >
|
Output:
Article Tags :