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

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

1 个答案: