[苹果cms] 优化截图标签模块

苹果cms后台可以编辑截图的地方，多数人并不常使用此功能，这边跟大家简单分享如何优化这个功能。

代码部份(视频)

<div class="vod-photos" id="gallery">
  {notempty name="$obj.vod_pic_screenshot"}
    {volist name=":explode('#',$obj.vod_pic_screenshot);" id="vo2"}
      <img 
        src="{:mac_url_img($vo2)}" 
        data-pswp-src="{:mac_url_img($vo2)}" 
        alt="文章截图"
        style="width:120px; height:auto; margin:5px; border-radius:4px; cursor: zoom-in;"
        loading="lazy"
      />
    {/volist}
  {/notempty}
</div>

代码部份(文章)

<div class="vod-photos" id="gallery">
  {notempty name="$obj.art_pic_screenshot"}
    {volist name=":explode('#',$obj.art_pic_screenshot);" id="vo2"}
      <img 
        src="{:mac_url_img($vo2)}" 
        data-pswp-src="{:mac_url_img($vo2)}" 
        alt="文章截图"
        style="width:120px; height:auto; margin:5px; border-radius:4px; cursor: zoom-in;"
        loading="lazy"
      />
    {/volist}
  {/notempty}
</div>

为什么使用 # 来区分每一张图片地址是因为预设的代码是将每个截图以 # 做连接入库，虽然在苹果cms后台是以换行来配置，但是入库却是以#来表示。

如果你不想要用#来区隔每张截图则需要修改源码让入库的时候是以换行的形式入库，那截图标签的代码就要写成:

{notempty name="$obj.vod_pic_screenshot"}
{volist name=":explode(PHP_EOL,$obj.vod_pic_screenshot);" id="vo2"}
    <img src="{:mac_url_img($vo2)}" >
{/volist}
{/notempty}

这边使用的是用 PhotoSwipe 的图片灯箱集成方案，可以让图片放大缩小，将 PhotoSwipe 代码放在页面底部 </body> 之前

<!-- PhotoSwipe CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.css" />

<!-- PhotoSwipe JS (ESM) -->
<script type="module">
import PhotoSwipe from 'https://cdn.jsdelivr.net/npm/photoswipe@5.4.4/dist/photoswipe.esm.js';

// 工具函数：获取单张图片的真实尺寸
function getImageSize(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
    img.onerror = reject;
    img.src = url;
  });
}

// 初始化 PhotoSwipe
async function initPhotoSwipe() {
  const gallery = document.getElementById('gallery');
  if (!gallery) return;

  const thumbs = gallery.querySelectorAll('img[data-pswp-src]');
  if (thumbs.length === 0) return;

  // 为每张缩略图绑定点击事件
  thumbs.forEach((thumb, index) => {
    thumb.addEventListener('click', async (e) => {
      e.preventDefault();

      // 显示加载提示（可选）
      const loadingEl = document.createElement('div');
      loadingEl.textContent = '加载中...';
      loadingEl.style.cssText = `
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.7); color: white; padding: 10px; border-radius: 4px; z-index: 9999;
      `;
      document.body.appendChild(loadingEl);

      try {
        // 动态构建 items（每张图都预加载获取尺寸）
        const items = [];
        for (const img of thumbs) {
          const src = img.dataset.pswpSrc || img.src;
          try {
            const { width, height } = await getImageSize(src);
            items.push({
              src: src,
              w: width,
              h: height,
              alt: img.alt || ''
            });
          } catch (err) {
            console.warn('Failed to load image for PhotoSwipe:', src, err);
            // 如果加载失败，给一个默认尺寸避免崩溃
            items.push({ src, w: 800, h: 600, alt: img.alt || '' });
          }
        }

        // 移除加载提示
        document.body.removeChild(loadingEl);

        // 启动 PhotoSwipe
        const pswp = new PhotoSwipe({
          dataSource: items,
          index: index,
          bgOpacity: 0.9,
          padding: { top: 20, bottom: 40, left: 20, right: 20 },
          wheelToZoom: true,
          pinchToClose: true,
          closeTitle: '关闭 (Esc)',
          zoomTitle: '缩放'
        });
        pswp.init();

      } catch (err) {
        console.error('PhotoSwipe init error:', err);
        if (loadingEl.parentNode) document.body.removeChild(loadingEl);
      }
    });
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initPhotoSwipe);
</script>

PhotoSwipe 灯箱被网站其他元素（如导航栏、悬浮按钮、广告等）覆盖，这是因为这些元素的 z-index 值比 PhotoSwipe 默认的更高。

PhotoSwipe v5 默认的 z-index 是 9999，但很多 CMS 模板或广告脚本会使用 更高的值（如 99999、2147483647），导致灯箱被遮挡。

强制提高 PhotoSwipe 的 z-index

你只需要在 CSS 中覆盖 PhotoSwipe 的根容器 z-index 即可。

<style>
/* 确保 PhotoSwipe 在最顶层 */
.pswp {
  z-index: 2147483640 !important;
}
</style>