AMP-CAROUSEL 标记中缺少强制属性“灯箱”答案

【问题标题】：The mandatory attribute 'lightbox' is missing in tag AMP-CAROUSELAMP-CAROUSEL 标记中缺少强制属性“灯箱”
【发布时间】：2018-06-27 13:21:10
【问题描述】：

我似乎找不到任何有关如何在 AMP 页面中的 AMP-CAROUSEL 标记上使用灯箱属性的信息。..

Google Web Master 工具显然认为这是无效的 AMP 语法，那么为什么没有任何关于此灯箱属性以及如何使用它的文档？

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

【问题讨论】：

标签： html amp-html

【解决方案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>

【讨论】：