About New Component: amp-auto-lightbox. How to Auto Lightbox Image?
About New AMP Component amp-auto-lightbox. An explanation of the Newest AMP HTML feature. But the amp-auto-lightbox feature is still in experimental mode, even though the Github has been announced rolled out.
An explanation of the AMP HTML <amp-auto-lightbox> feature
Every day, AMP Project developers and contributors work to update or add features to AMP HTML. And recently, an AMP Project contributor on Github explained about the latest features or components of AMP HTML. This feature or component is called amp-auto-lightbox. What is that? I will explain on this article.
amp-auto-lightbox currently it will be active when a Web AMP visitor visits the page from Google, or from URL
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
google.com/amp/:url or http://*.cdn.ampproject.orgIf 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
ligthbox="" attribute to amp-img. 
But, with the amp-auto-lightbox component, our work seems easier. If you want to activate the image lightbox feature it's simple. Because, we no longer need to manually add the lightbox attribute to amp-img.
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.
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-lightbox
There 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
google.com/amp/:urlorhttp://*.cdn.ampproject.org
How to amp-auto-lightbox
For now, you don't need to add any AMP components to activate the
amp-auto-lightbox feature.Prevent auto-lightbox
As for ways to prevent the amp-auto-lightbox component from activating the auto lightbox in the image. The method is quite easy, you just add the attribute:
data-amp-auto-lightbox-disable in the image or parent tag.
Example, if you want to block auto lightbox on all website pages:
<body data-amp-auto-lightbox-disable>
If in a certain section:
<div id="main-wrapper" data-amp-auto-lightbox-disable>
Or if you only want to block auto lightbox in certain image:
<amp-img src="../image/example.jpg" data-amp-auto-lightbox-disable=""> </amp-img>
So, do you think this latest AMP HTML feature helps? Let's give comments and discussion. May be useful :)