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

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

演示 - https://codepen.io/anon/pen/LqJMwJ

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

Add lightbox functionality to images in a list that are not clickable

wordpress

jquery

lightbox

html-lists