0

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
4
  • Is this on the frontend or in the editor? 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... Commented Jan 30, 2020 at 14:13
  • can't you just use the src url? 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... Commented Jan 30, 2020 at 21:29

1 Answer 1

Reset to default
0

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
1
  • 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. Commented Feb 1, 2020 at 22:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.