标记 AMP-CAROUSEL 中缺少必需属性 'lightbox'

Question

我似乎找不到任何关于如何在 AMP 页面中的 AMP-CAROUSEL 标签上使用 lightbox 属性的信息。

Google 网站管理员工具显然认为这是无效的 AMP 语法，那么为什么没有关于此灯箱属性及其使用方法的任何文档？

连他们的样品都不见了？ https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

Answer 1

是的，你是对的image_galleries_with_amp-carousel它不存在。代替这个你可以使用 amp-lightbox-gallery 和 amp-carousel

amp-lightbox ：amp-lightbox-gallery 组件为 AMP 组件（例如 amp-img、amp-carousel）提供“灯箱”体验。当用户与 AMP 元素交互时，一个 UI 组件会扩展以填充视口，直到它被用户关闭。目前仅支持图像。

更多详情click here

Here is working URL

代码：

<!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>

标记 AMP-CAROUSEL 中缺少必需属性 'lightbox'

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

html

amp-html