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?

| improve this question | | | | |
  • Is this on the frontend or in the editor? – Tom J Nowell Jan 30 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 Jan 30 at 14:13
  • can't you just use the src url? – Tim Elsass Jan 30 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 Jan 30 at 21:29

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:

enter image description here

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

| improve this answer | | | | |
  • Indeed, I have missed this option. Then, I use javascript to get the <figcaption> text and add it to the <a> tag in order to display the caption in the lightbox. – cyclone200 Feb 1 at 22:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.