How to Enable Image Lightbox in AMP Blogger

Image Lightbox can be interpreted when the image in an article is clicked, it will appear an overlay that displays a larger image.

And if in the post there are more than one image, the overlay will display the images with the next-prev button.

Blogger already has this built-in feature, which can be enabled in the dashboard settings menu. However, for you Blogspot users who have costumed the template in such a way, the built-in lightbox image will not work even if it is enabled.

People who have redesigned the template, and removing default Blogger blog css and javascript  like blunded css will make the lightbox will not run..

And for those of you who have upgraded your Blogger blog to AMP HTML, certainly will not feel the default feature of this blogger. You should follow the ampproject.com guidelines if you want to activate the lightbox image and the blog page remains valid AMP.

AMP Project has prepared a special javascript for those of you who want to activate or use lightbox on an image.

So if the image in the article is clicked, it will appear an overlay that displays the image in larger size. 

I will explain how to setup javascript image lightbox on AMP Blogger blog. 

To enable the lightbox feature on the AMP page, you need to insert a javascript in your template, ie amp-lightbox-gallery.

Copy the code below in Edit HTML dashboard in your Blogger. Paste before </ head>:

Optionally import the amp-carousel component in the header if you are using lightbox with carousel :

<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Copy this follwoing CSS dan paste after <style amp-custom='amp-custom'> :
amp-img[lightbox] {cursor: pointer;}

Well, to activate the lightbox when the image in the article is clicked, you must enter lightbox='lightbox' on  <amp-img> tag when  upload images on your blogger posts. Example:

<amp-img lightbox='lightbox' alt="amp lightbox" height='320px' layout="fixed-height" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JG6iGm8nJmBxsiVujDkPfgkrb5Q8vbuqXtXKcXY6QmIKmQdC9ROl1H14iRe1nIaJ470E_TgfJwXG9_KL4Yur5B_RxdH3PIC8YIXLIbKFdk9UcKyUtXihKScAyRnG_Oo8dasG2pNqZ-7C/s320/sikunir+golden+sunrise.png"></amp-img>

The results are as below:

If you upload more than one image in your post, there will be a next-prev button on your lightbox overlay.


Hopefully useful :)