В теге AMP-CAROUSEL отсутствует обязательный атрибут 'лайтбокс' - PullRequest
Новая
       8

В теге AMP-CAROUSEL отсутствует обязательный атрибут 'лайтбокс'

0 голосов
/ 26 июня 2018

Не получается найти информацию о том, как использовать атрибут лайтбокса в теге AMP-CAROUSEL на страницах AMP.

Инструменты Google Web Master, очевидно, считают, что это недопустимый синтаксис AMP, так почему нет документации по этому атрибуту лайтбокса и как его использовать?

enter image description here

Даже в их образцах его нет? https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

enter image description here

1 Ответ

0 голосов
/ 27 июня 2018

Да, вы правы image_galleries_with_amp-carousel его там нет. Для этого вы можете использовать amp-lightbox-gallery и amp-carousel

amp-lightbox : Компонент amp-lightbox-gallery предоставляет возможность «лайтбокса» для компонентов AMP (например, amp-img, amp-carousel). Когда пользователь взаимодействует с элементом AMP, компонент пользовательского интерфейса расширяется, чтобы заполнить область просмотра, пока пользователь не закроет ее. В настоящее время поддерживаются только изображения.

Для более подробной информации нажмите здесь

Вот рабочий 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>
...