将灯箱功能添加到列表中不可点击的图像

Question

我使用某个wordpress主题与一个具有自己的库功能的编辑器。使用此主题编辑器无法创建标准的wordpress库。它有自己的库，可以生成如下代码：

<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>

现在我想添加一些灯箱功能。是否有一些jquery脚本或插件可以使用此代码？通过使用href标记包装图像然后再运行一些jquery代码，以便每个ul都可以成为带有图片的灯箱库？

Answer 1

如果你可以用链接包装图像，那么任何灯箱类型的脚本都可以工作。但是，如果你无法改变布局，那么你可以使用像这样的fancybox：

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))
});

但是ku zxsw指出