AMP-карусель внутри лайтбокса не открывает записанное на пленку изображение - PullRequest
Новая
       7

AMP-карусель внутри лайтбокса не открывает записанное на пленку изображение

0 голосов
/ 30 октября 2018

Я работаю на страницах Google AMP. Я внедрил AMP-карусель внутри усилителя-лайтбокса, чтобы, если у меня было несколько изображений, и я нажимал на одно, это открывало лайтбокс с поведением карусели.

Пока все отлично работает. но теперь, когда у меня есть изменение дизайна, теперь у меня есть одно основное изображение и три миниатюрные изображения, показанные под основным изображением: в случае, если у меня есть четыре или более четырех изображений.

Итак, для этого я хотел бы открыть любое изображение, по которому щелкнули, как первое изображение, показанное в карусели.

Я пробовал разные обходные пути, но пока ничего полезного. Например, я попытался использовать свойство on, предоставленное AMP, чтобы передать значение индекса, но я думаю, что это для лайтбокса, а не для карусели внутри лайтбокса.

Вот демоверсия: 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>

1 Ответ

0 голосов
/ 30 октября 2018

Использование on = "tap: YOUR-CAROUSEL-ID.goToSlide (index = INDEX-NUMBER)"

Демо: Нажмите здесь

Код: 

<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"

...