I am using jQuery to convert Gutenberg gallery image to clickable lightbox image. In order to do that, I was using jQuery to get the data-full-url attribute but I just found that some images don't have this attribute.

I tried to use the srcset attribute but I couldn't find a way to chose the "right" url (the full size one) from the list of urls in jQuery.

So, is there a way to get the full image url in jQuery?

I am using jQuery to convert Gutenberg gallery image to clickable lightbox image. In order to do that, I was using jQuery to get the data-full-url attribute but I just found that some images don't have this attribute.

I tried to use the srcset attribute but I couldn't find a way to chose the "right" url (the full size one) from the list of urls in jQuery.

So, is there a way to get the full image url in jQuery?

• jquery
• block-editor

• Is this on the frontend or in the editor? – Tom J Nowell ♦ Commented Jan 30, 2020 at 13:16
• @TomJNowell I'm using the Gutenberg editor to add galeries to the pages. Then, I have a js file that select the data-full-url from each image in the gallery to create the the correct lightbox syntax. But some images don't have data-full-url attribute... – cyclone200 Commented Jan 30, 2020 at 14:13
• can't you just use the src url? – Tim Elsass Commented Jan 30, 2020 at 17:17
• @TimElsass When I upload the image and use it in a gallery block, it resizes it and use a different size depending on the full size of the image. It can use the full one or a reduced one... – cyclone200 Commented Jan 30, 2020 at 21:29

1 Answer 1

You can solve this problem exactly the same way you would if you were using the classic editor. Use the hyperlink href attributes. Most lightbox libraries already do this out of the box

In order to do this, you'll need to tell the gallery to link to the media files. You can do this in the sidebar like this:

You can also register your own gallery block, then deregister the original