AMP-SCRIPT в изображениях лайтбокс не работает - PullRequest
Новая
       7

AMP-SCRIPT в изображениях лайтбокс не работает

1 голос
/ 11 апреля 2020

Изображения, вставленные с помощью amp-script, не работают с amp-lightbox-gallery.

Рабочая демонстрация: codepen 

<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <meta
    name="amp-script-src"
    content="sha384-I9xOUm3Jm9oUT6XlY5GDaErukIKdyozy7GfhKQ_ghLTXlcvcuHYf2FM_99gWN9PK"
  />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

  <title>Hello, AMPs</title>
  <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Open-source framework for publishing content",
      "datePublished": "2015-10-07T12:02:41Z",
      "image": [
        "logo.jpg"
      ]
    }
  </script>
  <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>
</head>

<body>
  <h1>Welcome to the AMP web</h1>

  <div>
    <h2>script Collection</h2>
    <amp-script height="213" width="320" script="getImage">
      <div id="newImage" data-id="0"></div>
    </amp-script>

    <amp-script height="213" width="320" script="getImage">
      <div id="newImage" data-id="1"></div>
    </amp-script>

    <amp-script height="213" width="320" script="getImage">
      <div id="newImage" data-id="2"></div>
    </amp-script>

    <amp-script height="213" width="320" script="getImage">
      <div id="newImage" data-id="3"></div>
    </amp-script>
  </div>

  <script id="getImage" type="text/plain" target="amp-script">
    const fetchNewImages = async () => {
      const containerImage = document.getElementById("newImage");
      const id = containerImage.getAttribute("data-id");
      const response = await fetch(
        "https://amp.dev/documentation/examples/api/slow-json-with-items/"
      );
      const data = await response.json();
      
      const url = data.items[id].img;

      containerImage.innerHTML = `<amp-img lightbox="scriptCollection" src="https://amp.dev${url}" alt="" width="320" height="213"></amp-img>`;
    };
    fetchNewImages();
  </script>

  <div>
    <h2>normal Collection</h2>
    <amp-img lightbox="normalCollection" src="https://amp.dev/static/samples/img/product1_640x426.jpg" alt="" width="320" height="213"></amp-img>
    <amp-img lightbox="normalCollection" src="https://amp.dev/static/samples/img/product2_640x426.jpg" alt="" width="320" height="213"></amp-img>
    <amp-img lightbox="normalCollection" src="https://amp.dev/static/samples/img/product3_640x426.jpg" alt="" width="320" height="213"></amp-img>
    <amp-img lightbox="normalCollection" src="https://amp.dev/static/samples/img/product4_640x426.jpg" alt="" width="320" height="213"></amp-img>
  </div>

</body>

</html>

Я могу вставлять новые изображения на страницу, используя amp-скрипт, но как я могу заставить их работать в amp-lightbox-gallery?

Del: Из-за идиотской ошибки c ("Похоже, ваше сообщение в основном содержит код; пожалуйста, добавьте еще некоторые детали.") В stackoverflow, мне пришлось вставить этот текст lorem. Извините

...