Im using a certain wordpress theme with an editor that has its own gallery function. Its not possible to create standard wordpress gallery with this theme editor. It has its own gallery that generates code like this:
<ul class="wp-block-gallery columns-3 is-cropped">
<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefaan-25-1024x768.jpg" alt="" data-id="211" data-link="http://www.website.com/teset/stefaan-25/" class="wp-image-211"><figcaption><br></figcaption></figure>
</li>
<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefaan-en-joerie-25-12-1.jpg" alt="" data-id="218" data-link="http://www.website.com/teset/stefaan-en-joerie-25-12-2/" class="wp-image-218" ></figure>
</li>
<li class="blocks-gallery-item"><figure><img src="http://www.website.com/wp-content/uploads/2019/01/stefan-15-1-1024x768.jpg" alt="" data-id="219" data-link="http://www.website.com/teset/stefan-15-2/" class="wp-image-219"></figure>
</li>
Now i want to add some lightbox functionality. Is there some jquery script or plugin that can work with this code? By wrapping the images with an a href tag and then running some more jquery code so that every ul can become a lightbox gallery with the pictures in it?
If you could wrap your images with links, then any lightbox-type script would work. But, if you are not able to change the layout, then you could, for example, use fancybox like this:
var $images = $('.wp-block-gallery img');
var fb = [];
$images.each(function(index, img) {
fb.push({
src : img.src,
type: 'image',
$orig : $(img).parent()
})
});
$('.wp-block-gallery').on('click', 'img', function() {
$.fancybox.open(fb, {
// Here you can put your custom options
}, $images.index(this))
});