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?

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

  • 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 '20 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.