October 2017
Intermediate to advanced
370 pages
8h 57m
English
Earlier, we saw how to build a product image gallery that used amp-carousel under the hood: Clicking a thumbnail displayed the associated product image. We could extend this further so that if the main product image is clicked, then it is opened in a lightbox.
To achieve this, we can use amp-image-lightbox. This is a specialized lightbox component that will display any image that activates it with via the on event, without having to include the image element directly within the amp-image-lightbox element.
Let's add it to our page (/ch5/product-lightbox.html):
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
We need to use a responsive layout ...
Read now
Unlock full access