Question

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

Google Web Master工具显然认为这是无效的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”

1 个答案: