Google AMP amp-lightbox-gallery
The amp-lightbox-gallery component is used to give a lightbox experience for other amp components like amp-carousel, amp-img. Presently only images are supported by amp-lightbox-gallery.
Required Script: Importing the amp-lightbox-gallery component into the header.
HTML
< script async custom-element = "amp-lightbox-gallery" src = "https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js" > </ script > |
Attributes:
- lightbox: We use this attribute to add a lightbox effect to the images.
- src: Specify the URL or the path of the image that is to be embedded.
- layout: Specifies the layout of the image e.g. responsive.
Example:
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 w3wiki </ p > < amp-img lightbox src = "https://media.w3wiki.net/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" width = "300" height = "200" layout = "responsive" > </ amp-img > < p class = "paragraph" > w3wiki A Computer Science portal for Beginner. </ p > </ div > </ body > </ html > |
Output:
Clicking on the image gives the following view
Clicking on the top left gallery option gives the following view
Contact Us