Help me with the lightbox

Hi @prudhvikanakala !

It doesn’t look like the Simple Lightbox plugin is AMP-compatible, which is probably why it’s not working on your AMP page.

Since you’re using Reader mode, the AMP plugin removes invalid markup in the background. When I use Simple Lightbox with Transitional mode, I can see it uses custom JavaScript which is not allowed on AMP pages and is automatically removed (under AMP > Validated URLs).

With that said, you have some options:

1) You can reach out to the authors of Simple Lightbox and request compatibility with AMP.

2) You can use the AMP plugin’s lightbox feature for your AMP pages if you’re using the default block editor. Open the image block settings, go down to AMP Settings, and toggle on Add lightbox effect for your images: https://jmp.sh/bnyE743

3) If you’re using the classic editor and have your images linked to the media file (which looks to be required for Simple Lightbox), there is this mini plugin that will apply the lightbox to your images (installation instructions included):

https://gist.github.com/westonruter/fefdcda37df7bde61c7b0f690fafc01c

Thank you so much for your quick reply.

The 3rd option seems to be perfect for my situation now. I went with that and installed that mini plugin. But seems to be it’s not working at all. The image links on amp page are still there.

please help!!

@prudhvikanakala thanks for your reply!

1) Which editor are you using on the site?

2) Are you using JetPack’s Site Accelerator to optimize your images?

It looks like when it resizes the image it provides a different link to the media file than the image source. The mini plugin requires that these match.

Could you turn off this option for images and check if the lightbox works on your AMP page?

Yeah, I thought the same after watching the different URL generated by jetpack for images, So I turned it off and checked. Now, when I reload the page, the image path is normal link “gamentech.in/wp-content/… ”

Still, when I click on it, the light box is not working.

Here a link for your reference:

https://gamentech.in/technology/spotify-and-google-facing-service-disruption-worldwide/amp

@prudhvikanakala thanks for your reply!

On that page, the first image actually has the lightbox working.

For the second image I see the following link to the image:

https://gamentech.in/wp-content/uploads/2020/08/gadwwss1.jpg

But the image source shows:

https://gamentech.in/wp-content/uploads/2020/08/gadwwss1-1024×468.jpg

Did you insert a resized version of the image in the post?

Hey, I apologize for my late reply, some festive thing goin on here.

Well thanks for the reply and I completely understood how things going on. everything’s fine now.

one question, Can’t I use light box for compressed images? cause’ simple light box doing it on the non AMP pages. I know that kind of function is not implemented. Can we expect that in the future?

@prudhvikanakala great to hear you got it working.

There is a request to implement the functionality of the mini plugin in the AMP plugin:

https://github.com/ampproject/amp-wp/issues/4591

I’ll pass along your additional request to the team for consideration.

@reneesoffice Thank you so much for your great support. I’m marking this as resolved now.