Lightbox doesn't support URLs without image extension

Wappler General Bugs
#1

Lightbox appears to fail when the source image in is the format used by imgix.

I had Lightbox working without a CDN
and I had it working with S3 (amazon uses an embedded image instruction “fit-in” as opposed to instructions appended to the END of the URL)

But the URL format is different with imgix. the image parms are added to the END of the URL after the filename. This is what I believe to be the issue.

Either my syntax is wrong, or Lightbox doesn’t like it.

this works, but shows the images in their native size (HUGE images)
<a href="" dmx-bind:href="'https://lm.imgix.net/'+$value">

this doesn’t work - causes “Url not supported”
<a href="" dmx-bind:href="'https://lm.imgix.net/'+$value+'?w=1100'">

This last link works fine to request the WIDTH on a IMG SRC tag. In Multiple places I’m showing the imgix scaled images just fine using this syntax.

example link: http://137.184.106.209/vehicle_info?id=100
click on an image to get Lightbox error

Wappler 5.0.3 Released
#2

Your link is missing a /

'https://lake-mirror-car-show.imgix.net'+$value+'?w=300&fit=clip'

should be

'https://lake-mirror-car-show.imgix.net/'+$value+'?w=300&fit=clip'
#3

sorry, thats not it.
I know you checked the source and I just updated it.
(I had lots of places to insert this code throughout the app and missed the / on that one.)

If you can please check again, you’ll see the error.
In the source you are viewing, I can remove +’?w=500&fit=clip’ from the end and lightbox will work.
(I modified the examples in the post to fit in one line so they could easily be compared)

#4

Yes i see the issue, the lighbox script expects the url to end with an image extension like .jpg, .png etc.
Maybe @patrick can check if this can be improved.

#5
#6

oh, i didnt realize “we” (Wappler) was in control of that code.
Yes, that would be nice @Patrick !!!

I can say that setting up imgix was the easiest thing in the world. In my case, I used the “Web Folder” method, because my images were already on my website host. For S3 I had to copy them to buckets which wasn’t ideal because its now redundant copies I had to keep current (when a new vehicle image was altered or added).

#7

This has been an issue since day one.
I stumbled upon it accidentally last year I think.
Here’s the workaround:

<a href="" dmx-bind:href="'https://lm.imgix.net/'+$value+'?w=1100&1.jpg'">

Lightbox needs an extension at the end of the URL. That’s all.

2 Likes
#8

Nice workaround, didn’t think of it :slight_smile:

#9

yes, that works! Thx
(and a lot better without the ** surrounding it - lol)

#10

I was trying to emphasise/bold that part. :sweat_smile:

#11

Should be fixed in the following update:

dmxLightbox.zip (3.1 KB)

#12
#13

Fixed in Wappler 5.0.3

#14
#15

This topic was automatically closed after 32 hours. New replies are no longer allowed.