Google AMP amp-image-lightbox
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 = "https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js" > </ 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 = "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.w3wiki.net/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 >w3wiki</ figcaption > </ figure > </ body > </ html > |
Output:
Contact Us