灯箱内的 AMP 轮播未打开 taped/clicked 图片

Question

我正在处理 google AMP 页面。我在 amp-lightbox 中实现了 AMP-carousel，这样如果我有多个图像并单击其中一个，它会打开具有 carousel 行为的灯箱。

到目前为止一切正常。但现在我对设计进行了更改，以便在主图像下方显示一个主图像和三个缩略图图像：以防我有四张或多于四张图像。

因此，为此，我想打开任何被点击的图像作为轮播中显示的第一张图像。

我尝试了不同的解决方法，但目前没有任何帮助。例如，我尝试了 AMP 提供的 on 属性来传递索引值，但我认为它是直接用于灯箱而不是灯箱内的轮播。

演示如下： https://jsfiddle.net/kfd8e6sr/26/

你可以看到，无论我点击什么图片，它总是打开第一张图片。

代码：

<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=1">
  </amp-img>
</div>
<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=2">
  </amp-img>
</div>
<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=3">
  </amp-img>
</div>

<amp-lightbox id="my-lightbox" layout="nodisplay" on="tap:my-lightbox.close" tabindex="1">
    <amp-carousel dir="ltr" width="16" height="9" layout="responsive" type="slides"  on="tap:my-lightbox.close" role="button">
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=1">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=2">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=3">
        </amp-img>
    </amp-carousel>
</amp-lightbox>

Answer 1

在="tap:YOUR-CAROUSEL-ID.goToSlide(index=INDEX-NUMBER)"

上使用

演示：Click Here

代码：

<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=0)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=1">
  </amp-img>
  </div>
  <div class="img-container">
    <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=1)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=2">
    </amp-img>
  </div>
<div class="img-container">
      <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=2)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=3">
      </amp-img>
</div>

<amp-lightbox id="my-lightbox" layout="nodisplay" tabindex="1">
<button on="tap:my-lightbox.close">
Close
</button>
    <amp-carousel id="carousel-with-preview" dir="ltr" width="16" height="9" layout="responsive" type="slides"  role="button">
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=1">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=2">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=3">
        </amp-img>
    </amp-carousel>
</amp-lightbox>

注意：轮播索引从 0 开始

如何为一个事件调用多个动作？

示例：on="tap:target1.actionA,target2.actionB"

灯箱内的 AMP 轮播未打开 taped/clicked 图片

AMP carousel inside lightbox not opening the taped/clicked image

html

javascript

jquery

amp-html