Google Photos Lightbox URL Not Supported

[Heather_Mann]

I’m trying to use Google photos with lightbox but I’m getting an error URL Not Supported. Interestingly I can click on that link and it takes me to the image.

I though it probably has something to do with - Lightbox Not Working With v5 Update and there not being file extensions on the google photo urls as I added .jpg to the end of the urls and the lightbox came up but with just a spinner going round and round.

So - I had a poke around the dmxLighbox.js file and figured out if I commented part of this line it works perfectly.

                if (window.URL /*&& (m = new URL(i.href).pathname), /\.(jpe?g|gif|png|bmp|webp|svg)$/i.test(m)*/) {

Is this something we can get changed generally or is there a reason for it being like that?

Thanks.

[patrick]

How does the link (url/href) to google photos look like?

[Heather_Mann]

https://lh3.googleusercontent.com/lr/ANt_8_YRXUGVdpCXxZNHqWhlAOaY8-pphdWF_abSN8Ie4waC0udMA1eVAnMdPZQHP2_yTXXHVAIqa5Br3ltpUgh_sHvV1TbscMktSgCRJWkU3BGsX5_h1xNPEZo9guKJ2yOnX0xUro8NKFOB_Svjzg9hqupJpWHyIVfNKffI8pvISTtkF4C5xWhAYqYDN-dNb3OwyE_LatRqqClBb4bje6Mvsk7rxowi1f6_Dmgtivrl50Yodapu8gbNEbYR1yODL4RL1ITqpt_XxMd2yAQsgKRwGNKdy3yit7KhOQME1wrMeCheIsMF7PgCOdBnqLmFct16GqrAmr5yPqVtTC2pr_gGDV6PbW7sWhjPYKMOWR6tkK9Ta2MdmqjGGvlCHLVy70mwrWk2AP22P9-dLPF-1tGjm6IaIE_sTE4oEUYp1wMI9pD9yevXTO1WqNyZrNPJvU75IFnjge0pnmJQiY8QpD4JyGRCpPtTkv8h0EAhVNdzjahTOEy5NSLziWFav7ukIO9CALf3bIQ4L0mLfI_yscAzY9xP-LKZY0tNTK_DmrogVL3TnX6gnwep0dhpmMpJ-k8km2MiAwrm7tglHdVbJ4Tsv88ynEeEUlSLMu_zvmrOVhybI_PJwzFeGHMUv_SDBLSdULtkxLXPjf3PSYUcWQ-Qxf_wRxUUf5nu7vukBqkGHv1m6MyA6lJjc1adpg8QMyWdALj6Hf7welGwTOlzfvxVOfjAbN1YiYdSCJmXrZsrWXYGLNpUchgDwkD0RZ_YTkT7dkICxh-MKXPPeCSYdBkGmS28rv9mQQg2FOn4az3I_ezypSeA75uqFYI6WV6qwLGnM8vi1Hn49Ub4Ih8PkDUhw2yGaXviSsghQx4qrh0KujMuTsznkRKzD-L7wKmtUKeIgQvM7IeQiWc8f-JHRlK9SAHh-ImUqbPD_RWl6uuPJd-3KiRLDpZAgNIJx4-Jfv79UGu34GwFBzSxzBfTuunh6aT41XY5iOsP1zCUJBri5LMdJdCHuxRrCyYS=w2000

[Heather_Mann]

FYI - Just noticed that the commenting out that line doesn’t help on mobile.

[Hyperbytes]

Not really my area of expertise but it looks like the lightbox .js checks for a valid file type. The google url has no file type.
I wonder if a dummy parameter at the end if the url could trick it without breaking the link I.e. append something like f=.jpg to the end of the google url?

[Heather_Mann]

Good thought Brian, but unfortunately it breaks the image.

[Hyperbytes]

Maybe a change to the check to also allow images containing “googleusercontent” in the URL?

[patrick]

I’ve updated the code to default to image when it can’t detect the type. You can also override the detection by adding the type as an attribute data-type="image". Currently image and video are supported types. Video will create a video element, so must point to an actual video file and not youtube.

dmxLightbox.zip (3.2 KB)

[Heather_Mann]

Fab. Thanks

[Teodor]

This has been improved in Wappler 5.3.2