Question

我正在Google AMP页面上工作。我在amp-lightbox中实现了AMP轮播，这样，如果我有多个图像，然后单击其中一个，它将打开具有轮播行为的灯箱。

到目前为止，一切正常。但是现在我已经进行了设计更改，因此在主图像下方显示了一个主图像和三个缩略图图像：如果我有四个或四个以上图像。

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

我尝试了不同的解决方法，但到目前为止没有任何帮助。例如，我尝试使用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

使用on =“ 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轮播无法打开粘贴/单击的图像

1 个答案: