Search code examples
htmlamp-html

The mandatory attribute 'lightbox' is missing in tag AMP-CAROUSEL

I can't seem to find any information about how to use the lightbox attribute on the AMP-CAROUSEL tag in AMP pages..

Google Web Master tools obviously think this is invalid AMP syntax so why isn't there any documentation about this lightbox attribute and how to use it?

enter image description here

Even their samples have it missing? https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

enter image description here

Solution

  • Yes you are correct image_galleries_with_amp-carousel it is not there. In palce of this You can use amp-lightbox-gallery and amp-carousel

    amp-lightbox : The amp-lightbox-gallery component provides a "lightbox” experience for AMP components (e.g., amp-img, amp-carousel). When the user interacts with the AMP element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.

    For more details click here

    Here is working URL

    CODE : 

    <!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="amp-lightbox-gallery-with-carousel.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style amp-custom>
    .wrapper { width:600px; margin:0 auto; }
    .overlay-text {
      position: absolute;
      bottom: 16px;
      left: 16px;
      z-index: 1;
      pointer-events: none;
      background-color: #494A4D;
      color: white;
      padding: 2px 6px 2px 6px;
      border-radius: 2px;
      opacity: 0.7;
      font-family: Roboto, sans-serif;
      font-size: 1em;
    }
    amp-img[lightbox] {
      cursor: pointer;
    }
  </style>
    <title>AMP Lightbox Gallery with Carousel</title>
 </head>
 <body>
 <div class="wrapper">
    <amp-carousel controls lightbox width="400" height="400" layout="responsive" type="slides">
      <amp-img src="https://dummyimage.com/600x400/F00/FFF" width="400" height="400" layout="responsive"></amp-img>
      <amp-img src="https://dummyimage.com/600x400/FF0/FFF" width="400" height="400" layout="responsive"></amp-img>
      <amp-img src="https://dummyimage.com/600x400/00F/FFF" width="400" height="400" layout="responsive"></amp-img>
    </amp-carousel>
  </div>
 </body>
</html>