October 2017
Intermediate to advanced
370 pages
8h 57m
English
The lightbox can be closed by clicking or tapping outside the image, or hitting ESC on a keyboard, but once again, we can provide a better UX by adding a dedicated close button. We can add it directly to the lightbox element as follows, using our trusty SVG close button again:
<amp-image-lightbox id="image-lightbox" layout="nodisplay"> <svg class="btn-close" xmlns="http://www.w3.org/2000/svg" width="21" height="21" on="tap:image-lightbox.close" role="button" tabindex="0" viewBox="0 0 21.97 21.97"> <path fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M1.25 20.72L20.72 1.25m-19.47 0l19.47 19.47" stroke-linecap="round" /> </svg></amp-image-lightbox>
We can style it like this:
amp-image-lightbox {text-align: ...Read now
Unlock full access