如何修改JS代码让Lightbox打开图片的高清版本？

你的问题核心是当前JS直接读取了图片的缩略图src，需要改为加载srcset中的高清原图，同时保持前后切换逻辑正常工作。以下是具体修改步骤：

1. 添加解析srcset获取高清图的工具函数 #

写一个函数从图片的srcset属性中提取分辨率最高的图片URL：

function getHighResImage(srcset) {
  if (!srcset) return '';
  // 拆分srcset为单个资源项
  const sources = srcset.split(',').map(item => {
    const [url, widthStr] = item.trim().split(' ');
    const width = widthStr ? parseInt(widthStr.replace('w', '')) : 0;
    return { url, width };
  });
  // 按宽度降序排序，取第一个即为高清图
  return sources.sort((a, b) => b.width - a.width)[0].url;
}

2. 初始化时为图片存储高清图路径 #

在遍历图片的环节，给每个图片添加data-highres属性存储高清图URL，方便后续调用：

allGallery.forEach((item, index) => {
   let imgs =  item.querySelectorAll('img')
    const imageArray = [];
   imgs.forEach((im) => {
        im.setAttribute('data-galley', index);
        // 新增：解析srcset获取高清图并存储到data属性
        const highResUrl = getHighResImage(im.getAttribute('srcset'));
        im.setAttribute('data-highres', highResUrl);
        imageArray.push(im);
        images.push(im);
})
imageGroup.push(imageArray);
});

3. 修改Lightbox创建逻辑，加载高清图 #

在handleCreateLightbox函数中，替换原来读取src的逻辑，改为读取data-highres：

function handleCreateLightbox(e) {
    // 改为读取data-highres中的高清图路径
    let linkImage = e.target.dataset.highres;
    let ss = e.target.dataset.galley
    // 后续HTML生成代码保持不变
    let code = `...`
    document.body.insertAdjacentHTML('beforeend', code)
}

4. 修改切换逻辑，匹配高清图路径 #

因为现在Lightbox中的图片是高清URL，需要修改索引查找逻辑，改为用data-highres匹配，同时修改ChangeLinkImage函数读取高清路径：

function handleOutLightbox(e) {
    const lightImage = document.querySelector('.cookie_box-image')
    let imageSrc = ''
    if (!lightImage) return
    let galley_id = e.target.dataset.source;

    if (e.target.matches('.cookie_box')) {
      const body = e.target.parentNode
      body.removeChild(e.target)

    } else if (e.target.matches('.cookie_box-next')) {
      imageSrc = lightImage.getAttribute('src')
      // 修改：用data-highres匹配查找索引
      index = imageGroup[galley_id].findIndex(item => item.dataset.highres === imageSrc)
      index = index + 1
      firstImage = 0
      if (index > imageGroup[galley_id].length - 1) {
        index = firstImage
      }
      ChangeLinkImage(galley_id , index, lightImage)

    } else if (e.target.matches('.cookie_box-prev')) {
      imageSrc = lightImage.getAttribute('src')
      // 修改：用data-highres匹配查找索引
      index = imageGroup[galley_id].findIndex(item => item.dataset.highres === imageSrc)
      index = index - 1
      lastImage =imageGroup[galley_id].length - 1
      if (index < 0) {
        index = lastImage
      }
      ChangeLinkImage( galley_id, index, lightImage)
    }
}

function ChangeLinkImage(galley_id, index, lightImage) {
    // 修改：读取data-highres中的高清图路径
    const newLink = imageGroup[galley_id][index].dataset.highres
    lightImage.setAttribute('src', newLink)
}

完整修改后的代码 #

window.addEventListener('load', function () {
const allGallery = [...document.querySelectorAll('.wp-block-gallery')]

// 新增：解析srcset获取高清图的工具函数
function getHighResImage(srcset) {
  if (!srcset) return '';
  const sources = srcset.split(',').map(item => {
    const [url, widthStr] = item.trim().split(' ');
    const width = widthStr ? parseInt(widthStr.replace('w', '')) : 0;
    return { url, width };
  });
  return sources.sort((a, b) => b.width - a.width)[0].url;
}

let imageGroup = [];
let images = [];
allGallery.forEach((item, index) => {
   let imgs =  item.querySelectorAll('img')
    const imageArray = [];
   imgs.forEach((im) => {
        im.setAttribute('data-galley', index);
        // 新增：存储高清图路径到data属性
        const highResUrl = getHighResImage(im.getAttribute('srcset'));
        im.setAttribute('data-highres', highResUrl);
        imageArray.push(im);
        images.push(im);
})
imageGroup.push(imageArray);
});
images.forEach(e => e.style.cursor = "zoom-in")
  array = [...images].forEach(item => item.addEventListener('click', handleCreateLightbox))
  function handleCreateLightbox(e) {
    // 修改：读取高清图路径
    let linkImage = e.target.dataset.highres;
    let ss = e.target.dataset.galley
    let code = `<div class="cookie_box">
    <div class="cookie_box-content">
      <i class="cookie_box-prev" data-source="${ss}"><svg class="cookie_box-prev" data-source="${ss}" width="22"  viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(-.26458 0 0 .26458 96.472 0)"/></g></svg></i>
      <img
        src="${linkImage}"
        alt=""
        class="cookie_box-image"
      />
      <i class="cookie_box-next" data-source="${ss}"><svg data-source="${ss}" class="cookie_box-next" width="22" viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(.26458 0 0 .26458 -29.78 0)"/></g></svg></i>
    </div>
  </div>`
    document.body.insertAdjacentHTML('beforeend', code)
  }
  let index = 0
  document.addEventListener('click', handleOutLightbox)
  function handleOutLightbox(e) {
    const lightImage = document.querySelector('.cookie_box-image')
    let imageSrc = ''
    if (!lightImage) return
    let galley_id = e.target.dataset.source;

    if (e.target.matches('.cookie_box')) {
      const body = e.target.parentNode
      body.removeChild(e.target)

    } else if (e.target.matches('.cookie_box-next')) {
      imageSrc = lightImage.getAttribute('src')
      // 修改：用高清图路径匹配索引
      index = imageGroup[galley_id].findIndex(item => item.dataset.highres === imageSrc)
      index = index + 1
      firstImage = 0
      if (index > imageGroup[galley_id].length - 1) {
        index = firstImage
      }
      ChangeLinkImage(galley_id , index, lightImage)

    } else if (e.target.matches('.cookie_box-prev')) {
      imageSrc = lightImage.getAttribute('src')
      // 修改：用高清图路径匹配索引
      index = imageGroup[galley_id].findIndex(item => item.dataset.highres === imageSrc)
      index = index - 1
      lastImage =imageGroup[galley_id].length - 1
      if (index < 0) {
        index = lastImage
      }
      ChangeLinkImage( galley_id, index, lightImage)
    }
  }
  function ChangeLinkImage(galley_id, index, lightImage) {
    // 修改：读取高清图路径
    const newLink = imageGroup[galley_id][index].dataset.highres
    lightImage.setAttribute('src', newLink)
  }
})

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