An explanation of the AMP HTML <amp-auto-lightbox> feature
What's amp-auto-lightbox?AMP's Auto-Lightbox has a function to automatically detect images and place the image into a lightbox. So when a visitor clicks on one of the images on the article, the image will appear in a modal popup (lightbox).
amp-auto-lightbox currently it will be active when a Web AMP visitor visits the page from Google, or from URL
If you have ever read How to active image Lightbox in AMP Blogger, in that article I explained how to activate the lightbox for amp-img. Where you can simply add amp-lightbox-gallery component and add the
But the amp-auto-lightbox feature is still in experimental mode, even though the Github has been announced rolled out. If seen on the amp experimental activation page, this component is still in the experimental stage.
In addition, there are several "conditions" so that images in an article can be automatically clicked on and appear in the lightbox. I will explain below.
How to be auto-lightboxThere are a number of conditions or conditions if the image wants to be automatically clicked and appears in the lightbox:
- Images are in an open graph or schema with a type of: Article, NewsArticle, BlogPosting, LiveBlogPosting, DiscussionForumPosting.
- Image not in this tag:
<a href>, <button>, <amp-selector>
- There is no
on="tap: ..." actionon amp-img
- Image will not "get"
amp-auto-lightboxif you use image with:amp-script, amp-story, amp-lightbox.
- And the most important is, amp-auto-lightbox currently it will be active when a Web AMP visitor visits the page from Google, or from URL
How to amp-auto-lightbox
data-amp-auto-lightbox-disablein the image or parent tag.
<div id="main-wrapper" data-amp-auto-lightbox-disable>
<amp-img src="../image/example.jpg" data-amp-auto-lightbox-disable=""> </amp-img>