Divi Gallery自定义：实现项目多图Lightbox切换功能

方法一：利用Lightbox分组属性（最简单） #

• 给同项目的所有图片设置相同的Lightbox分组名称：编辑Gallery模块时，选中同项目的图片，在右侧「Lightbox设置」里填写统一的分组名（比如“chair-01”）
• 每个项目只留一张主缩略图显示，其他同项目图片设置为隐藏：给这些图片加自定义CSS类hidden-project-image，然后在Divi自定义CSS里添加代码： .hidden-project-image { display: none; }
• 点击主缩略图时，Lightbox会自动加载同分组的所有图片，就能在Lightbox内切换同项目的不同视图

方法二：自定义JS修改Lightbox行为 #

如果不想隐藏图片，或者需要更灵活的控制，可以用JS重写Lightbox的图片列表：

• 给每个Gallery项目的图片添加data-project-group属性，比如同项目的图片都加data-project-group="table-01"
• 把下面的代码加到Divi主题选项的「自定义代码」→「页脚」区域：

jQuery(document).ready(function($) {
  // 覆盖Divi默认的Gallery点击事件
  $('.et_pb_gallery_item').off('click').on('click', function(e) {
    var targetGroup = $(this).find('img').data('project-group');
    // 收集同组的所有图片
    var groupItems = [];
    $('.et_pb_gallery_item img[data-project-group="' + targetGroup + '"]').each(function() {
      groupItems.push({
        src: $(this).attr('src'),
        title: $(this).attr('alt') || ''
      });
    });
    // 打开自定义分组的Lightbox
    $.magnificPopup.open({
      items: groupItems,
      type: 'image',
      gallery: { enabled: true },
      removalDelay: 300,
      mainClass: 'mfp-fade'
    });
    e.preventDefault();
  });
});

• 保存后点击项目缩略图，Lightbox就只会加载同分组的图片，不会跨项目切换

方法三：改用Divi Portfolio模块 #

如果你的项目本身适合用自定义文章类型管理，这个方法更省心：

• 启用WordPress的Portfolio自定义文章类型（Divi默认支持），每个项目新建一篇Portfolio文章，在文章编辑器里上传所有项目图片
• 用Divi的Portfolio模块展示项目缩略图，在模块设置里找到「Lightbox」选项，勾选「打开Lightbox」和「显示文章中的所有图片」
• 点击项目缩略图时，Lightbox会自动加载该Portfolio文章里的所有图片，完美实现同项目多图切换

内容的提问来源于stack exchange，提问作者Jasmin