Ad

AMP Carousel Inside Lightbox Not Opening The Taped/clicked Image

- 1 answer

I am working on the google AMP pages. I implemented the AMP-carousel inside an amp-lightbox so that if I have multiple images and I click on one, it opens up the lightbox with carousel behavior.

Everything works fine so far. but now that I have a design change so that I have one main image and three thumbnails images shown below the main image: in case I have four or more than four images.

So, for that, I would like to open whatever the image is clicked as the first image shown in the carousel.

I tried different workarounds but nothing helpful as of now. For Example, I tried the on property provided by AMP to pass the index value but I think it is for the lightbox directly not the carousel inside the lightbox.

Here is the demo:https://jsfiddle.net/kfd8e6sr/26/

you can see that, it is always opening the first image no matter whatever the image I am clicking.

Code:

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

Answer

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

Demo : Click Here

Code :

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

Note : carousel index start from 0

How to call Multiple actions for one event ?

Example: on="tap:target1.actionA,target2.actionB"

Ad
source: stackoverflow.com
Ad